/* kb base - font, body, fixed page background. */
@layer kb.base {
  @font-face {
    font-family: "Source Sans 3";
    src: url("fonts/SourceSans3VF-Upright.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Source Sans 3";
    src: url("fonts/SourceSans3VF-Italic.woff2") format("woff2");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
  }

  /* Legacy stylesheets read --font-family-base; point it at the kb font. */
  :root {
    --font-family-base: var(--kb-font);
  }

  html {
    background: var(--kb-page);
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
    }
  }

  body {
    font-family: var(--kb-font);
    color: var(--kb-text);
    /* The page background lives on html::before so it stays fixed while scrolling. */
    background: transparent;
  }

  table {
    font-variant-numeric: tabular-nums;
  }

  /* Page backdrop layer. Light is a flat, neutral --kb-page (on html) with no glow; only dark paints here. */
  html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
  }

  /* Dark = near-black ocean-blue ground. Only the page backdrop changes, not surface or menu tokens. */
  :root[data-theme="dark"]::before {
    background-image:
      linear-gradient(104deg, transparent 15%, rgba(59, 130, 246, .015) 38%, rgba(14, 165, 233, .01) 52%, rgba(99, 102, 241, .01) 66%, transparent 85%),
      radial-gradient(70% 45% at 80% -5%, rgba(59, 130, 246, .025), transparent 70%),
      linear-gradient(color-mix(in srgb, var(--kb-page) 45%, #000), color-mix(in srgb, var(--kb-page) 45%, #000));
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme])::before {
      background-image:
        linear-gradient(104deg, transparent 15%, rgba(59, 130, 246, .015) 38%, rgba(14, 165, 233, .01) 52%, rgba(99, 102, 241, .01) 66%, transparent 85%),
        radial-gradient(70% 45% at 80% -5%, rgba(59, 130, 246, .025), transparent 70%),
        linear-gradient(color-mix(in srgb, var(--kb-page) 45%, #000), color-mix(in srgb, var(--kb-page) 45%, #000));
    }
  }

  /* Legacy css/base.css sets html { scroll-behavior: smooth }. It lives in @layer legacy, the lowest layer,
     so this rule wins; reduced motion gets plain jumps. */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
}

/* @view-transition and the view-transition pseudo-elements cannot live inside a layer. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}