/* ==========================================================================
   tokens.css — design tokens
   The single source of truth for colour, type, space, motion, and elevation.
   Nothing else in the codebase should hardcode a colour or a magic number.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Typography
     System stack by choice: no webfont download, no render-blocking request,
     no CLS, no third-party origin in the CSP. Distinctiveness comes from the
     scale, weight, and tracking below rather than an exotic typeface.
     --------------------------------------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
    "Segoe UI Mono", Menlo, Consolas, monospace;
  --font-arabic: "Segoe UI Variable Display", "Segoe UI", Tahoma,
    "Noto Naskh Arabic", system-ui, sans-serif;

  /* Fluid type scale — 1.250 (major third) at the small end, opening up on
     wide viewports. clamp() keeps every step responsive without breakpoints. */
  --text-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
  --text-xl:   clamp(1.375rem, 1.29rem + 0.42vw, 1.625rem);
  --text-2xl:  clamp(1.75rem, 1.58rem + 0.85vw, 2.25rem);
  --text-3xl:  clamp(2.25rem, 1.93rem + 1.60vw, 3.25rem);
  --text-4xl:  clamp(2.75rem, 2.13rem + 3.10vw, 4.75rem);

  --leading-tight: 1.1;
  --leading-snug: 1.28;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tighter: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-widest: 0.14em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---------------------------------------------------------------------
     Spacing — 4px base, geometric-ish progression
     --------------------------------------------------------------------- */
  --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: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* Vertical rhythm between major sections, fluid across viewports. */
  --section-gap: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --container-max: 72rem;      /* 1152px — comfortable measure on wide screens */
  --container-narrow: 48rem;   /* prose column */
  --container-pad: clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
  --header-height: 4.5rem;

  /* ---------------------------------------------------------------------
     Radius
     --------------------------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     Motion
     One easing curve family so everything feels like one system.
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* decelerate — entrances */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* symmetric — state flips */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot — affordances */

  --duration-fast: 150ms;
  --duration-base: 260ms;
  --duration-slow: 520ms;
  --duration-slower: 800ms;

  /* ---------------------------------------------------------------------
     Accent — a single restrained hue. Stated as HSL parts so tints/shades
     and alpha variants stay in gamut and in tune with each other.
     --------------------------------------------------------------------- */
  --accent-h: 252;
  --accent-s: 92%;
}

/* ==========================================================================
   Light theme — warm paper, not pure white. Pure #fff under a dark headline
   is harsh; a hint of warmth reads as "designed".
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: #fcfcfd;
  --bg-subtle: #f4f5f8;
  --bg-inset: #eef0f4;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-overlay: rgba(255, 255, 255, 0.82);

  --border: rgba(15, 18, 32, 0.09);
  --border-strong: rgba(15, 18, 32, 0.16);

  --text: #0d1020;
  --text-secondary: #4a5069;
  --text-muted: #737a94;

  --accent: hsl(var(--accent-h) var(--accent-s) 60%);
  --accent-hover: hsl(var(--accent-h) var(--accent-s) 53%);
  --accent-contrast: #ffffff;
  --accent-subtle: hsl(var(--accent-h) var(--accent-s) 60% / 0.10);
  --accent-border: hsl(var(--accent-h) var(--accent-s) 60% / 0.28);
  --accent-text: hsl(var(--accent-h) 72% 45%);

  --success: #0f8a5f;
  --danger: #d33a3a;

  --shadow-sm: 0 1px 2px rgba(15, 18, 32, 0.05), 0 1px 3px rgba(15, 18, 32, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 18, 32, 0.07), 0 2px 6px -2px rgba(15, 18, 32, 0.05);
  --shadow-lg: 0 18px 40px -12px rgba(15, 18, 32, 0.16), 0 6px 16px -8px rgba(15, 18, 32, 0.08);
  --shadow-accent: 0 12px 28px -10px hsl(var(--accent-h) var(--accent-s) 55% / 0.45);

  /* Decorative hero wash */
  --hero-glow-1: hsl(var(--accent-h) 90% 72% / 0.30);
  --hero-glow-2: hsl(190 85% 62% / 0.20);
  --grid-line: rgba(15, 18, 32, 0.045);
}

/* ==========================================================================
   Dark theme — designed, not inverted. Deep ink base with a deliberate
   surface ladder so cards/inputs read as genuinely elevated (an earlier
   revision had every surface within ~6 RGB units of the page, which made
   everything look flat).
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #08090f;
  --bg-subtle: #0c0e16;
  --bg-inset: #101320;
  --surface: #12151f;
  --surface-raised: #181c29;
  --surface-overlay: rgba(18, 21, 31, 0.78);

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);

  --text: #f2f3f7;
  --text-secondary: #b3b8ca;
  --text-muted: #838a9f;

  --accent: hsl(var(--accent-h) 96% 72%);
  --accent-hover: hsl(var(--accent-h) 96% 78%);
  --accent-contrast: #0a0b12;
  --accent-subtle: hsl(var(--accent-h) 96% 72% / 0.14);
  --accent-border: hsl(var(--accent-h) 96% 72% / 0.38);
  --accent-text: hsl(var(--accent-h) 96% 78%);

  --success: #3ddc9a;
  --danger: #ff6b6b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 50px -16px rgba(0, 0, 0, 0.75);
  --shadow-accent: 0 14px 34px -12px hsl(var(--accent-h) 96% 62% / 0.55);

  --hero-glow-1: hsl(var(--accent-h) 90% 60% / 0.28);
  --hero-glow-2: hsl(190 90% 55% / 0.16);
  --grid-line: rgba(255, 255, 255, 0.035);
}