/* design-tokens.css
   Global CSS custom properties (design tokens)
   Loaded before main.css in HTML: <link href="design-tokens.css"> then <link href="main.css">

   Notes:
   - Keep tokens limited to values (colors, spacing, sizes, tokens).
   - Motion and component rules belong in motion.css / components/*.css.
   - This file intentionally avoids any component rules; only tokens and theme overrides.
*/

:root {
  /* -----------------------------
     Base colors
     ----------------------------- */
  --primary: #0b5cff;
  --primary-700: #0849cc;
  --bg: #f9fafb;
  --surface: #ffffff;
  --text: #0B2540;
  --muted: #5B6F88;
  --success: #0b6020;
  --danger: #911b1b;

  /* -----------------------------
     Page background (lighter, moving, header-matching)
     - Use these tokens to drive the .site (page) background
     ----------------------------- */
  --page-bg: linear-gradient(120deg, #f2f6ff 0%, #e6fbff 45%, #fbfdff 100%);
  --page-bg-solid: #f9fafb;            /* fallback solid */
  --page-bg-duration: 18s;             /* animation duration for page background */
  --page-bg-overlay: rgba(255,255,255,0.55); /* subtle overlay for readability */

  /* Optional: slightly stronger overlay used on very busy pages */
  --page-bg-overlay-strong: rgba(255,255,255,0.72);

  /* -----------------------------
     Header (animated/mixed) — white text
     ----------------------------- */
  --header-bg: linear-gradient(120deg, #153a8a 0%, #1e5bd1 45%, #1d75d8 100%);
  --header-bg-solid: #1e5bd1;          /* solid fallback */
  --header-bg-duration: 10s;           /* header animation duration */
  --header-overlay: rgba(2,12,30,0.22);/* improves white text legibility */
  --header-text: #ffffff;              /* header text color */
  --header-cta: #0bbcd6;               /* header CTA color */
  --header-cta-hover: #08a8be;

  /* -----------------------------
     Borders / shadows
     ----------------------------- */
  --border: #e6e9ef;
  --shadow-1: 0 6px 20px rgba(16,24,40,0.06);

  /* -----------------------------
     Radii
     ----------------------------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* -----------------------------
     Spacing scale
     ----------------------------- */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;

  /* -----------------------------
     Typography
     ----------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-heading: var(--font-sans);
  --type-base: 16px;
  --line-height-tight: 1.25;
  --line-height: 1.5;
  --line-height-loose: 1.7;
  --font-size-50: 0.875rem;
  --font-size-100: 1rem;
  --font-size-200: 1.125rem;
  --font-size-300: 1.25rem;
  --font-size-400: 1.5rem;
  --font-size-500: 1.875rem;
  --font-size-600: 2.25rem;

  /* -----------------------------
     Layout
     ----------------------------- */
  --header-height: 64px;
  --max-width: 1100px;
  --main-max-width: 1400px;

  /* -----------------------------
     Z-index utilities
     ----------------------------- */
  --z-dropdown: 60;
  --z-header: 50;

  /* -----------------------------
     Semantic tokens
     ----------------------------- */
  --btn-bg: var(--primary);
  --primary-color: var(--primary);
  --color-primary: var(--primary);
  --btn-text: #ffffff;
  --btn-bg-hover: var(--primary-700);
  --btn-radius-sm: 8px;
  --btn-radius-md: 10px;
  --btn-height-sm: 36px;
  --btn-height-md: 42px;
  --btn-height-lg: 48px;
  --btn-pad-x-sm: 0.625rem;
  --btn-pad-x-md: 0.875rem;
  --btn-pad-x-lg: 1rem;
  --control-radius: var(--radius-md);
  --control-height-sm: 36px;
  --control-height-md: 42px;
  --control-height-lg: 48px;
  --control-pad-x: 0.75rem;
  --link: var(--primary);
  --focus-ring: rgba(11,92,255,0.24);
  --focus-ring-width: 3px;

  /* -----------------------------
     Accessibility helpers (tokens only)
     ----------------------------- */
  --reduced-motion-pref: 0; /* 0 = animations allowed; 1 = prefer-reduced-motion fallback — read by JS if needed */
}

/* =========================================
   Dark theme override (semantic & visual)
   Use body.theme-dark on the <body> to opt-in
   ========================================= */
body.theme-dark {
  --bg: #001028;
  --surface: #021126;
  --text: #f3f7ff;
  --muted: rgba(255,255,255,0.7);
  --border: rgba(255,255,255,0.04);

  /* deeper, cooler animated header */
  --header-bg: linear-gradient(120deg, #0f2f72 0%, #1a4eaf 45%, #1a66bf 100%);
  --header-bg-solid: #1a4eaf;
  --header-overlay: rgba(0,0,0,0.24);
  --header-text: #f3f7ff;
  --header-cta: #0bbcd6;
  --header-cta-hover: #08a8be;

  /* dark page background (muted, subtle motion) */
  --page-bg: linear-gradient(120deg, #021226 0%, #03344b 45%, #063a4a 100%);
  --page-bg-solid: #001028;
  --page-bg-overlay: rgba(0,0,0,0.18);
}

@media (min-width: 1200px) {
  :root {
    --main-max-width: 1520px;
  }
}

/* =========================================
   Notes / recommended usage
   - Keep this file purely tokens. Motion keyframes and component styles live in motion.css
   - Ensure design-tokens.css is loaded BEFORE main.css (so main.css can use the tokens)
   - To test quickly, add the debug class `.site.debug-bg-test` to your page wrapper
     and use the test rule in motion.css as described in documentation.
   ========================================= */