/* ============================================================================
   GridMail Design Tokens — the single source of truth.
   Governed by /DESIGN.md. Do NOT hardcode colors, radii, easing, or spacing
   anywhere else. If you need a value that isn't here, add it here first.
   Direction: Linear-style dark. One accent. Borders, not shadows.
   ============================================================================ */

:root {
  /* --- 1. Surfaces (luminance ladder, never pure black) --- */
  --bg: #0A0A0B;
  --surface: #141415;
  --surface-raised: #1B1B1D;
  --surface-overlay: #222225;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.40);

  /* --- 2. Text (opacity hierarchy, never pure white) --- */
  --ink: #F0F1F2;
  --ink-secondary: rgba(255, 255, 255, 0.62);
  --ink-tertiary: rgba(255, 255, 255, 0.42);
  --ink-disabled: rgba(255, 255, 255, 0.28);

  /* --- 3. Accent — EXACTLY ONE, LOCKED: Signal Azure (Phase 1 sign-off).
     Continuity with the old brand blue + the broadcast/"delivered" metaphor.
     Appears ONLY on: primary CTA, active/selected state, focus ring, links. --- */
  --accent: #3D7DFF;
  --accent-hover: #5B92FF;
  --accent-pressed: #2E6AE6;
  --accent-soft: rgba(61, 125, 255, 0.14);
  --accent-ring: rgba(61, 125, 255, 0.55);
  --accent-contrast: #FFFFFF;

  /* Text-bearing accent fills (buttons / CTAs) use --accent-solid, a step darker,
     so white labels clear WCAG AA 4.5:1. White on #3D7DFF is ~3.8:1 (fails at 14px);
     on #2E6AE6 it is ~4.9:1. The base --accent (#3D7DFF) stays for links, focus rings,
     selected states, and highlights, where no small text sits directly on it. */
  --accent-solid: #2E6AE6;
  --accent-solid-hover: #2559C9;
  --accent-solid-pressed: #1E4FB8;

  /* --- Semantic (status only, small only, never chrome) --- */
  --good: #35B87D;
  --warn: #E0A63B;
  --bad:  #E5484D;

  /* --- 4. Typography --- */
  --font-display: 'Clash Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 — app UI base */
  --text-base: 0.9375rem; /* 15 */
  --text-md: 1.0625rem;   /* 17 */
  --text-lg: 1.3125rem;   /* 21 */
  --text-xl: 1.625rem;    /* 26 */
  --text-2xl: 2.0625rem;  /* 33 */
  --text-3xl: 2.5625rem;  /* 41 */
  --text-4xl: 3.25rem;    /* 52 */
  --text-5xl: 4rem;       /* 64 */
  --text-6xl: 5rem;       /* 80 */

  --weight-normal: 460;
  --weight-medium: 540;
  --weight-bold: 620;

  --tracking-tight: -0.02em;   /* display ~32px */
  --tracking-tighter: -0.03em; /* display ~48px */
  --tracking-tightest: -0.04em;/* display 64px+ */
  --leading-display: 1.05;
  --leading-body: 1.55;
  --measure: 65ch;

  /* --- 5. Geometry & rhythm --- */
  --r-control: 6px;
  --r-card: 10px;
  --r-media: 16px;

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

  --container: 1200px;
  --nav-h: 64px;

  /* --- 6. Motion --- */
  --dur-micro: 120ms;
  --dur-standard: 160ms;
  --dur-large: 400ms;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}