/* =============================================================================
   Reset + base elements
   ============================================================================= */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
  body { min-height: 100dvh; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p { text-wrap: pretty; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  :where([hidden]) { display: none !important; }
}

@layer base {
  html {
    background: #07080b;            /* paints before CSS variables resolve */
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-gutter: stable;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-m);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
    font-synthesis: none;
    overflow-x: clip;
  }

  .app {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    transition:
      --hue 1.6s var(--ease-in-out),
      background-color var(--dur-3) var(--ease-out),
      color var(--dur-3) var(--ease-out);
  }

  .app__main {
    position: relative;
    z-index: var(--z-content);
    min-height: 100dvh;
    outline: none;
  }

  ::selection { background: color-mix(in oklch, var(--accent) 40%, transparent); color: var(--text); }

  a { transition: color var(--dur-2) var(--ease-out); }
  a:not([class]) { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
  a:not([class]):hover { text-decoration-color: currentColor; }

  code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }

  hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }

  /* ---- Focus: an accent ring that "lands" from a wider offset */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--focus-radius, 6px);
    animation: focus-land var(--dur-2) var(--ease-out);
  }

  /* Blazor moves focus to the page <h1> after navigation (good for screen readers);
     that programmatic focus shouldn't paint a ring. */
  [tabindex="-1"]:focus,
  [tabindex="-1"]:focus-visible { outline: none; animation: none; }

  @keyframes focus-land {
    from { outline-offset: 9px; outline-color: transparent; }
  }

  /* ---- Skip link */
  .skip-link {
    position: fixed;
    inset-block-start: var(--s-3);
    inset-inline-start: var(--s-3);
    z-index: var(--z-toast);
    padding: var(--s-2) var(--s-4);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    translate: 0 -200%;
    transition: translate var(--dur-2) var(--ease-out);
  }
  .skip-link:focus-visible { translate: 0 0; }

  /* ---- Scrollbars (WebKit) */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* ---- Typography scale */
@layer base {
  .display-xl,
  .display-l,
  .h2,
  .h3 {
    font-family: var(--font-display);
    color: var(--text);
  }

  .display-xl {
    font-size: var(--fs-display-xl);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.05em;
  }

  .display-l {
    font-size: var(--fs-display-l);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }

  .h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.012em;
  }

  .lead {
    font-size: var(--fs-l);
    color: var(--text-dim);
    max-width: 62ch;
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .small { font-size: var(--fs-s); }
  .muted { color: var(--text-dim); }
  .faint { color: var(--text-faint); }
  .accent { color: var(--accent); }
  .mono { font-family: var(--font-mono); }
  .tnum { font-variant-numeric: tabular-nums; }

  .text-aurora {
    background: linear-gradient(100deg, var(--accent) 0%, var(--accent-3) 45%, var(--accent-2) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: aurora-text 9s var(--ease-in-out) infinite alternate;
  }

  @keyframes aurora-text {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
  }
}