/* exyt design tokens — the single source of colour, type, and spacing.
 *
 * Imported before styles.css. No raw hex belongs anywhere else: if a value
 * isn't here, add it here first.
 *
 * LIGHT MODE ONLY. There is deliberately no prefers-color-scheme block, no
 * theme toggle, and no [data-theme] selector. `color-scheme: light` is set
 * explicitly so a viewer whose OS is in dark mode doesn't get browser-inverted
 * form controls, scrollbars, and autofill backgrounds bleeding into the page.
 */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------- brand */
  --navy: #051b6d;
  --cyan: #3bf4fc;
  --off-white: #f6f6f6;
  --white: #ffffff;
  --black: #000000; /* reserved — navy is almost always the better choice */

  /* Navy-derived greys. build.md notes the brand guide doesn't cover these;
   * they're mixed toward navy rather than neutral so nothing looks muddy
   * beside the primary. #f6f6f6 is a surface, not a border. */
  --grey-900: #0b1233;
  --grey-800: #232a4d;
  --grey-700: #3a4166;
  --grey-600: #575d80;
  --grey-500: #6b7192;
  --grey-400: #9aa0b8;
  --grey-300: #c3c7d8;
  --grey-200: #dcdfe9;
  --grey-100: #ebedf3;
  --grey-50: #f4f5f9;

  /* Cyan at opacity, for rings and washes over both light and navy. */
  --cyan-30: rgba(59, 244, 252, 0.3);
  --cyan-15: rgba(59, 244, 252, 0.15);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-75: rgba(255, 255, 255, 0.75);

  /* ------------------------------------------------------ semantic */
  --ink: var(--navy);
  --ink-secondary: var(--grey-700);
  --ink-muted: var(--grey-500);
  --ink-inverse: var(--white);
  --ink-on-navy-muted: var(--white-60);

  --surface: var(--off-white);
  --surface-raised: var(--white);
  --surface-sunken: var(--grey-50);
  --surface-inverse: var(--navy);
  --surface-hover: var(--grey-100);

  --border: var(--grey-200);
  --border-strong: var(--grey-300);
  --border-inverse: var(--white-15);

  --accent: var(--cyan);

  /* THE ONE HARD RULE: cyan is never text on a light background.
   * #3bf4fc on white is ~1.3:1 — invisible in daylight, fails WCAG at every
   * level. It works as a FILL with navy text on it (10.6:1), as TEXT ON NAVY,
   * and as a FOCUS RING. For links and accent text on white, use --text-link:
   * the same hue darkened until it's actually readable. */
  --text-link: #0d9aa1;
  --text-link-hover: #0a7a80;

  /* State colours. build.md flags these as judgment, not brand — they're tuned
   * to sit beside navy without clashing. Worth confirming against exyt's
   * wider guidelines. All meet 4.5:1 on white. */
  --error: #c0334d;
  --error-bg: #fdeef1;
  --error-border: #f2c4cd;
  --success: #0f7a5a;
  --success-bg: #e9f7f2;
  --success-border: #b9e3d5;
  --warning: #8f5d00;
  --warning-bg: #fdf3e2;
  --warning-border: #edd6a8;

  /* ---------------------------------------------------------- type */
  --font-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas,
    monospace;

  /* Weights: 400/500/600 only. */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Headings: optical kerning, tracking -0.01em.
   * Body and subheadings: optical kerning, tracking 0. */
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --tracking-caps: 0.04em;

  /* -------------------------------------------------------- layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(5, 27, 109, 0.06);
  --shadow: 0 2px 8px rgba(5, 27, 109, 0.07);
  --shadow-lg: 0 12px 32px rgba(5, 27, 109, 0.12);

  --sidebar-width: 264px;
  --content-max: 768px;

  --transition: 140ms ease;
}