/*
  Design tokens. Contract: design/DESIGN-SYSTEM.md section 3. Ratios: design/TOKENS.md.

  Purpose: every colour, type size, spacing step, radius, layout width and motion duration the
  new UI uses is a --wy-* custom property defined here. wy.css, wy.js, wycharts.js and the
  templates use var(--wy-...) only. This is the only file with colour literals.

  Layout of this file:
    :root                                    the scales, the semantic colours and every non-colour token.
                                             The product is dark only (owner decision 2026-09-30): one
                                             palette, no light theme, no theme switch or toggle.
    @media (prefers-reduced-motion: reduce)  motion durations to 0
    @font-face                               self-hosted Inter Variable and JetBrains Mono Variable, latin subset

  How to add a token:
    1. Name it --wy-<group>-<role>. Point it at a scale step (var(--wy-neutral-600)) when one fits;
       write a literal only when none does.
    2. Add it to :root.
    3. If text or a control border will sit on it, check the ratio (4.5:1 for text, 3:1 for control
       borders and focus rings) and add the row to design/TOKENS.md.
    4. Reference it from wy.css only after it exists here.
*/

:root {
  /* Neutral scale (cool) */
  --wy-neutral-0: #ffffff;
  --wy-neutral-50: #f7f8fa;
  --wy-neutral-100: #eff1f4;
  --wy-neutral-200: #e2e5ea;
  --wy-neutral-300: #cbd0d8;
  --wy-neutral-400: #9aa3b0;
  --wy-neutral-500: #6b7583;
  --wy-neutral-600: #525b68;
  --wy-neutral-700: #3b424d;
  --wy-neutral-800: #252a32;
  --wy-neutral-900: #161a20;
  --wy-neutral-950: #0e1115;

  /* Accent scale (indigo) */
  --wy-accent-50: #eef0ff;
  --wy-accent-100: #e0e4ff;
  --wy-accent-200: #c5ccff;
  --wy-accent-300: #a3aeff;
  --wy-accent-400: #7f8cf7;
  --wy-accent-500: #5f6de8;
  --wy-accent-600: #4a58d6;
  --wy-accent-700: #3b47b4;
  --wy-accent-800: #2f3a8f;
  --wy-accent-900: #232b66;

  /* Semantic tokens (dark only: the product has one theme) */
  --wy-color-scheme: dark;
  --wy-bg: var(--wy-neutral-950);
  --wy-surface: var(--wy-neutral-900);
  --wy-surface-raised: var(--wy-neutral-800);
  --wy-surface-sunken: var(--wy-neutral-950);
  --wy-border: var(--wy-neutral-800);
  --wy-border-strong: var(--wy-neutral-700);
  --wy-border-control: var(--wy-neutral-500);
  --wy-text: var(--wy-neutral-50);
  --wy-text-muted: var(--wy-neutral-400);
  --wy-text-disabled: var(--wy-neutral-600);
  --wy-text-on-accent: var(--wy-neutral-900);
  --wy-accent: var(--wy-accent-400);
  --wy-accent-hover: var(--wy-accent-300);
  --wy-accent-subtle: #1b2039;
  --wy-accent-border: var(--wy-accent-500); /* 3:1 on every surface: selected option cards */
  --wy-focus: var(--wy-accent-400);
  --wy-success-bg: #12301f;
  --wy-success-fg: #3ecf8e;
  --wy-success-border: #1f5a39;
  --wy-warning-bg: #33270c;
  --wy-warning-fg: #e2b04a;
  --wy-warning-border: #6a5220;
  --wy-danger-bg: #3a1717;
  --wy-danger-fg: #f4736e;
  --wy-danger-border: #7a2b2b;
  --wy-info-bg: #1b2039;
  --wy-info-fg: var(--wy-accent-300);
  --wy-info-border: var(--wy-accent-800);
  --wy-neutral-bg: var(--wy-neutral-800);
  --wy-neutral-fg: var(--wy-neutral-300);
  --wy-neutral-border: var(--wy-neutral-700);
  --wy-danger: #db332f;
  --wy-danger-hover: #b72320;
  --wy-chart-1: var(--wy-accent-400);
  --wy-chart-2: var(--wy-neutral-400);
  --wy-chart-grid: var(--wy-neutral-800);
  --wy-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.6), 0 0 0 1px var(--wy-border);
  --wy-overlay: rgb(0 0 0 / 0.6);

  /* Typography */
  --wy-font-sans: "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif;
  --wy-font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wy-text-xs: 0.75rem;
  --wy-text-sm: 0.8125rem;
  --wy-text-md: 0.875rem;
  --wy-text-lg: 1rem;
  --wy-text-xl: 1.25rem;
  --wy-text-2xl: 1.5rem;
  --wy-text-3xl: 2rem;
  --wy-leading-tight: 1.25;
  --wy-leading: 1.5;
  --wy-weight-normal: 400;
  --wy-weight-medium: 500;
  --wy-weight-semibold: 600;

  /* Spacing */
  --wy-space-1: 4px;
  --wy-space-2: 8px;
  --wy-space-3: 12px;
  --wy-space-4: 16px;
  --wy-space-6: 24px;
  --wy-space-8: 32px;
  --wy-space-12: 48px;
  --wy-space-16: 64px;

  /* Radius */
  --wy-radius-sm: 4px;
  --wy-radius-md: 6px;
  --wy-radius-lg: 8px;
  --wy-radius-pill: 999px;

  /* Layout */
  --wy-content-max: 1280px;
  --wy-sidebar: 240px;
  --wy-sidebar-rail: 56px;
  --wy-topbar: 48px;

  /* Motion */
  --wy-motion-fast: 120ms;
  --wy-motion: 180ms;
  --wy-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Motion off when the user asks for it */
@media (prefers-reduced-motion: reduce) {
  :root {
    --wy-motion-fast: 0ms;
    --wy-motion: 0ms;
  }
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}