/* ============================================================================
   Perimeter — Brand & Design Tokens
   The single source of truth for the product's identity. Every later UI stage
   imports this file and builds only from these custom properties.

   Concept: "the amber beacon at the edge." A cool night-slate surface watched
   over by a single warm signal colour. Dark-first, WCAG-AA verified.
   ========================================================================== */

/* ------------------------------------------------------------------ Fonts -- */
/* Self-hosted, variable, WOFF2 only. Display = Space Grotesk (engineered,
   precise), Body = General Sans (neutral reading surface), Mono = JetBrains
   Mono (the instrument readout for hostnames, certs and DNS records). */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "General Sans";
  src: url("/fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

/* ------------------------------------------------- Static palette scales -- */
/* Mode-independent. Semantic tokens below reference these; never reference a
   raw scale value directly in product CSS — always go through a semantic token
   so dark/light and future re-tints stay centralised. */

:root {
  /* Neutral — cool night slate */
  --ink-50:  #F7F8FA;
  --ink-100: #E7EBEF;
  --ink-200: #CDD5DD;
  --ink-300: #A9B6C2;
  --ink-400: #8494A2;
  --ink-500: #5C6B79;
  --ink-600: #47535F;
  --ink-700: #37414B;
  --ink-800: #262D35;
  --ink-900: #151A20;
  --ink-950: #0E1216;

  /* Amber — the beacon (brand primary) */
  --amber-50:  #FDF6EC;
  --amber-100: #FAE9CC;
  --amber-200: #F5D399;
  --amber-300: #F0B85C;
  --amber-400: #E79E36;
  --amber-500: #D9861C;
  --amber-600: #B96E12;
  --amber-700: #9A5A0E;
  --amber-800: #7A4712;
  --amber-900: #653C14;
  --amber-950: #3A2009;

  /* Semantic hue ramps (partial — the shades the tokens actually use) */
  --info-100:  #D6E4FF;  --info-300: #7FB2FF;  --info-500: #2F74E6;  --info-700: #1D4FB0;  --info-900: #16305F;
  --ok-100:    #CFF3E2;  --ok-300:   #4FD198;  --ok-500:   #1FA968;  --ok-700:   #12734A;  --ok-900:   #0C3D28;
  --crit-100:  #FBD9DA;  --crit-300: #FF8A8A;  --crit-500: #E5484D;  --crit-700: #C42A2F;  --crit-900: #6E1416;

  /* Shape, motion, elevation — mode-independent */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "General Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-eyebrow: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.3rem + 2.1vw, 2.6rem);
  --fs-3xl: clamp(2.4rem, 1.6rem + 3.8vw, 4rem);
  --fs-4xl: clamp(3rem, 1.7rem + 5.6vw, 5.75rem);

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.62;
  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;
  --tracking-wide: 0.16em;

  --maxw-prose: 68ch;
  --maxw-page: 1160px;
}

/* --------------------------------------------------- Semantic tokens ------ */
/* Light is the :root default; dark applies via prefers-color-scheme (unless a
   theme is pinned) and via the explicit [data-theme="dark"] hook. */

:root {
  color-scheme: light;

  --bg: var(--ink-50);
  --bg-grid: rgba(14, 18, 22, 0.05);
  --surface: #FFFFFF;
  --surface-2: #F0F2F5;
  --surface-inset: #EAEEF2;

  --text: var(--ink-800);
  --text-strong: var(--ink-950);
  --text-muted: var(--ink-600);
  --text-subtle: var(--ink-500);
  --text-inverse: var(--ink-50);

  --border: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus: var(--amber-500);

  --primary: var(--amber-500);
  --primary-hover: var(--amber-600);
  --primary-active: var(--amber-700);
  --on-primary: var(--ink-950);
  --primary-text: var(--amber-700);   /* amber as link/accent text on light */
  --primary-tint: var(--amber-100);
  --beacon: var(--amber-400);         /* the glowing signal dot, mode-constant-ish */

  --ring: color-mix(in srgb, var(--amber-500) 55%, transparent);

  /* status: text / tint background / border */
  --info-fg: var(--info-700);   --info-bg: var(--info-100);   --info-line: var(--info-500);
  --ok-fg: var(--ok-700);       --ok-bg: var(--ok-100);       --ok-line: var(--ok-500);
  --warn-fg: var(--amber-800);  --warn-bg: var(--amber-100);  --warn-line: var(--amber-500);
  --crit-fg: var(--crit-700);   --crit-bg: var(--crit-100);   --crit-line: var(--crit-500);

  --shadow-sm: 0 1px 2px rgba(14, 18, 22, 0.06), 0 1px 3px rgba(14, 18, 22, 0.08);
  --shadow-md: 0 6px 16px -4px rgba(14, 18, 22, 0.12), 0 2px 6px -2px rgba(14, 18, 22, 0.08);
  --shadow-lg: 0 24px 48px -12px rgba(14, 18, 22, 0.20);
  --glow: 0 0 0 1px color-mix(in srgb, var(--amber-500) 30%, transparent), 0 0 22px -4px color-mix(in srgb, var(--amber-400) 55%, transparent);
}

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

    --bg: var(--ink-950);
    --bg-grid: rgba(231, 235, 239, 0.045);
    --surface: var(--ink-900);
    --surface-2: #1C232B;
    --surface-inset: #10151A;

    --text: var(--ink-100);
    --text-strong: var(--ink-50);
    --text-muted: var(--ink-300);
    --text-subtle: var(--ink-400);
    --text-inverse: var(--ink-950);

    --border: var(--ink-800);
    --border-strong: var(--ink-700);
    --border-focus: var(--amber-400);

    --primary: var(--amber-400);
    --primary-hover: var(--amber-300);
    --primary-active: var(--amber-200);
    --on-primary: var(--ink-950);
    --primary-text: var(--amber-300);
    --primary-tint: color-mix(in srgb, var(--amber-500) 18%, var(--ink-900));
    --beacon: var(--amber-400);

    --ring: color-mix(in srgb, var(--amber-400) 60%, transparent);

    --info-fg: var(--info-300);   --info-bg: color-mix(in srgb, var(--info-500) 16%, var(--ink-900));   --info-line: var(--info-500);
    --ok-fg: var(--ok-300);       --ok-bg: color-mix(in srgb, var(--ok-500) 16%, var(--ink-900));       --ok-line: var(--ok-500);
    --warn-fg: var(--amber-300);  --warn-bg: color-mix(in srgb, var(--amber-500) 16%, var(--ink-900));  --warn-line: var(--amber-400);
    --crit-fg: var(--crit-300);   --crit-bg: color-mix(in srgb, var(--crit-500) 18%, var(--ink-900));   --crit-line: var(--crit-500);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 30px 60px -18px rgba(0, 0, 0, 0.7);
    --glow: 0 0 0 1px color-mix(in srgb, var(--amber-400) 35%, transparent), 0 0 26px -2px color-mix(in srgb, var(--amber-400) 45%, transparent);
  }
}

/* Explicit dark — pinned by the theme toggle, wins over OS preference */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink-950);
  --bg-grid: rgba(231, 235, 239, 0.045);
  --surface: var(--ink-900);
  --surface-2: #1C232B;
  --surface-inset: #10151A;
  --text: var(--ink-100);
  --text-strong: var(--ink-50);
  --text-muted: var(--ink-300);
  --text-subtle: var(--ink-400);
  --text-inverse: var(--ink-950);
  --border: var(--ink-800);
  --border-strong: var(--ink-700);
  --border-focus: var(--amber-400);
  --primary: var(--amber-400);
  --primary-hover: var(--amber-300);
  --primary-active: var(--amber-200);
  --on-primary: var(--ink-950);
  --primary-text: var(--amber-300);
  --primary-tint: color-mix(in srgb, var(--amber-500) 18%, var(--ink-900));
  --beacon: var(--amber-400);
  --ring: color-mix(in srgb, var(--amber-400) 60%, transparent);
  --info-fg: var(--info-300);   --info-bg: color-mix(in srgb, var(--info-500) 16%, var(--ink-900));   --info-line: var(--info-500);
  --ok-fg: var(--ok-300);       --ok-bg: color-mix(in srgb, var(--ok-500) 16%, var(--ink-900));       --ok-line: var(--ok-500);
  --warn-fg: var(--amber-300);  --warn-bg: color-mix(in srgb, var(--amber-500) 16%, var(--ink-900));  --warn-line: var(--amber-400);
  --crit-fg: var(--crit-300);   --crit-bg: color-mix(in srgb, var(--crit-500) 18%, var(--ink-900));   --crit-line: var(--crit-500);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 60px -18px rgba(0, 0, 0, 0.7);
  --glow: 0 0 0 1px color-mix(in srgb, var(--amber-400) 35%, transparent), 0 0 26px -2px color-mix(in srgb, var(--amber-400) 45%, transparent);
}

/* --------------------------------------------------------- Base layer ----- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 650; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p, li, blockquote, figcaption { text-wrap: pretty; }
p { margin: 0 0 var(--space-4); max-width: var(--maxw-prose); }

a { color: var(--primary-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "kern" 1, "liga" 0, "calt" 1, "tnum" 1;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection { background: color-mix(in srgb, var(--amber-400) 32%, transparent); color: var(--text-strong); }

/* Eyebrow / label — the "instrument label" motif used across the product */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
  max-width: none;
}