/* Design tokens. The single source of truth for colour, type, space,
   radius, elevation and motion. See docs/standards/design-system.md
   sections 2, 3 and 4. Component rules live in site.css. */

@font-face {
  font-family: "Inter Var";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Mono";
  src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Surfaces and text */
  --bg-0: #0B1220;      /* page background */
  --bg-1: #111B2E;      /* card */
  --bg-2: #17253D;      /* raised, hover */
  --line: #24344F;      /* borders, dividers, non-interactive only */
  /* Interactive control boundaries must clear 3:1 per design-system.md
     section 2 and accessibility.md section 4. --line measures 1.38:1 on
     --bg-1, so controls use this instead. Same value as --text-3, so no
     new colour enters the palette. Verified 6.00:1 on --bg-0. */
  --line-control: #8393AB;
  --text-1: #E8EEF7;    /* primary text */
  --text-2: #AAB8CE;    /* secondary text */
  --text-3: #8393AB;    /* captions, min 16px usage only */
  --focus: #8FC4FF;     /* focus ring, never used for anything else */

  /* Status */
  --ok:    #6EDB8F;     /* pass */
  --warn:  #F5B84D;     /* attention */
  --fail:  #FF8080;     /* problem */
  --info:  #5CC8FF;     /* neutral note */

  /* Accent. Tool pages override via data-accent on the page root. */
  --accent:      #4FA3FF;
  --accent-ink:  #06101F;

  /* Type */
  --font-ui: "Inter Var", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Mono", ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

  --t-xxl: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --t-xxl-weight: 650;
  --t-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --t-xl-weight: 620;
  --t-lg: 1.25rem;
  --t-lg-weight: 600;
  --t-md: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.8125rem;

  --measure: 68ch;

  /* Space scale. Nothing off scale. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Radius */
  --r-card: 12px;
  --r-control: 8px;
  --r-pill: 999px;

  /* Elevation. One level only, raised panels only. */
  --shadow: 0 8px 24px rgb(0 0 0 / 0.35);

  /* Motion */
  --motion-fast: 150ms;
  --motion-slow: 250ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* Layout */
  --wrap: 1120px;
  --column: 720px;
  --gutter: var(--s-5);
}

/* Per tool accents, design-system.md section 2. */
[data-accent="base"]       { --accent: #4FA3FF; }
[data-accent="amber"]      { --accent: #F5B84D; }
[data-accent="teal"]       { --accent: #43D6B5; }
[data-accent="cyan"]       { --accent: #5CC8FF; }
[data-accent="violet"]     { --accent: #B08CFF; }
[data-accent="green"]      { --accent: #6EDB8F; }
[data-accent="coral"]      { --accent: #FF9D7E; }
[data-accent="periwinkle"] { --accent: #9DB4FF; }

@media (max-width: 480px) {
  :root { --gutter: var(--s-4); }
}