/* Local IBM Plex Sans: same family as the release tracker. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-semibold.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}

/* Design tokens — the only file allowed to carry raw color, duration, or
   z-index literals. Everything else consumes vars so a rebrand is one edit
   of --accent (rebrand.mjs writes it) and dark mode is a token swap. */

:root {
  /* Accent — single source. Derived roles come from color-mix so changing
     one value re-brands every component. */
  --accent: #234e40;
  --accent-strong: #153b2e;
  --accent-soft: #e3ebe5;
  --accent-ring: color-mix(in srgb, var(--accent) 32%, transparent);
  --on-accent: #fff;

  /* Surfaces — near-white page, white cards, subtle elevation. */
  --surface-page: #f5f6f2;
  --surface-raised: #fff;
  --surface-sunken: #ebeee8;
  --surface-overlay: #fff;
  --surface-inverse: #202c27;

  /* Ink — AA-checked roles on --surface-page/--surface-raised. */
  --ink-strong: #202c27;
  --ink-body: #35483e;
  --ink-muted: #59665d;
  --ink-faint: #657368;
  --on-inverse: #fafaf9;

  /* Hairline rules. */
  --rule: #d5dcd3;
  --rule-strong: #8b998d;

  /* Semantic roles (text + soft surface + rule for alerts/badges). */
  --danger-strong: color-mix(in srgb, var(--danger) 82%, #000);
  --success: #234e40;
  --success-soft: #e3ebe5;
  --success-rule: #8b998d;
  --warning: #775618;
  --warning-soft: #fcf4d6;
  --warning-rule: #f4da73;
  --danger: #a3332e;
  --danger-soft: #fff0ed;
  --danger-rule: #fecaca;
  --info: var(--accent);
  --info-soft: var(--accent-soft);
  --info-rule: var(--accent-ring);

  /* Type — first-party Plex with a system fallback. */
  --font-ui:
    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --text-display: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);

  --leading-tight: 1.2;
  --leading-heading: 1.3;
  --leading-body: 1.55;

  --tracking-tight: -0.02em;
  --tracking-caps: 0.06em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing — 4px base scale. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radii. */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* Elevation — three soft levels + focus ring. */
  --shadow-1: 0 1px 2px rgb(28 25 23 / 0.05), 0 1px 3px rgb(28 25 23 / 0.04);
  --shadow-2: 0 4px 12px rgb(28 25 23 / 0.07), 0 1px 3px rgb(28 25 23 / 0.05);
  --shadow-3: 0 16px 40px rgb(28 25 23 / 0.12), 0 4px 12px rgb(28 25 23 / 0.06);
  --ring-focus: 0 0 0 3px var(--accent-ring);

  /* Scrim behind dialogs; scroll-edge fade mask for tab strips. */
  --scrim: rgb(28 25 23 / 0.45);
  --scroll-fade-mask: linear-gradient(
    to right,
    transparent 0,
    #000 var(--mask-left, 0px),
    #000 calc(100% - var(--mask-right, 0px)),
    transparent 100%
  );

  /* Motion — four durations, three easings. Reduced motion removes all. */
  --dur-instant: 0.01ms;
  --dur-stagger: 40ms;
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 340ms;
  --dur-4: 520ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layers. */
  --z-header: 50;
  --z-menu: 60;
  --z-dialog: 80;
  --z-toast: 90;
  --z-skip: 100;

  /* Layout. */
  --container: 78rem;
  --container-narrow: 46rem;
  --header-height: 4.5rem;
}

/* Dark theme: token overrides only. Components never branch on theme —
   if a component needs a dark rule, the tokens above are wrong. */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #9fc7b2;
    --accent-strong: color-mix(in srgb, var(--accent) 88%, #fff);
    --accent-soft: color-mix(in srgb, var(--accent) 16%, #161514);
    --accent-ring: color-mix(in srgb, var(--accent) 40%, transparent);
    --on-accent: #16251d;

    --surface-page: #161514;
    --surface-raised: #1e1c1a;
    --surface-sunken: #121110;
    --surface-overlay: #262322;
    --surface-inverse: #f5f4f2;

    --ink-strong: #f5f4f2;
    --ink-body: #d6d3d1;
    --ink-muted: #a8a29e;
    --ink-faint: #78716c;
    --on-inverse: #161514;

    --rule: #292624;
    --rule-strong: #3b3835;

    --success: #4ade80;
    --success-soft: #14231a;
    --success-rule: #1f4030;
    --warning: #fbbf24;
    --warning-soft: #271e0e;
    --warning-rule: #4a3a1a;
    --danger: #f87171;
    --danger-strong: color-mix(in srgb, var(--danger) 88%, #fff);
    --danger-soft: #2a1616;
    --danger-rule: #4c2323;

    --scrim: rgb(0 0 0 / 0.6);

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.45);
    --shadow-3: 0 16px 40px rgb(0 0 0 / 0.55);
  }
}

@media (max-width: 56rem) {
  :root {
    --header-height: 6.5rem;
  }
}