/* ==========================================================
   VISTAAR — Design Tokens
   The only file allowed to hold colour values. Components use
   the tokens below and never a raw colour.
   ========================================================== */

/* ── Shared ───────────────────────────────────────────────── */
:root {
  /* Brand */
  --lime:    #c4f249;
  --on-lime: #0b0c0a;   /* text on any lime fill */

  /* Typography */
  --font-display: 'League Spartan', 'League Spartan Fallback', system-ui, sans-serif;
  --font-body:    'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --text-2xs: 12px;
  --text-xs:  13px;
  --text-sm:  15px;
  --text-base: 16px;
  --text-md:  18px;
  --text-lg:  20px;
  --text-xl:  24px;
  /* Heading sizes live on h1/h2/h3 in base.css. */

  /* Radii */
  --r-sm:   10px;   /* inputs, status messages */
  --r:      18px;   /* cards */
  --r-lg:   28px;   /* large panels: contact form, pricing table */
  --r-pill: 999px;  /* buttons, pills, badges */

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;
  --section-space:    clamp(80px, 12vw, 160px);
  --section-head-gap: clamp(40px, 5vw, 56px);
  --card-pad:    32px;
  --card-pad-sm: 24px;

  /* Layout */
  --container: 1240px;
  --gutter:    clamp(16px, 4vw, 32px);   /* container padding-inline */
  --z-nav:     100;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Derived from the theme tokens (resolve per theme) ──── */
  --border-strong:   color-mix(in srgb, var(--text) 18%, transparent);
  --border-input:    color-mix(in srgb, var(--text) 50%, transparent);        /* ≥3:1 for form fields */
  --border-hover:    color-mix(in srgb, var(--accent-text) 40%, transparent);
  --border-featured: color-mix(in srgb, var(--accent-text) 55%, transparent);
  --nav-bg-scrolled: color-mix(in srgb, var(--bg) 75%, transparent);   /* glass header */
  --overlay:         var(--bg);   /* opaque: a see-through menu shows blurred page shapes */

  --shadow:         0 18px 50px var(--shadow-color);
  --shadow-glow-sm: 0 10px 30px var(--glow);
  --shadow-glow:    0 16px 40px var(--glow);
  --shadow-glow-lg: 0 20px 46px var(--glow);
}

@media (max-width: 600px) {
  :root {
    --card-pad:    24px;
    --card-pad-sm: 20px;
  }
}

/* ── Light (default) ────────────────────────────────────────
   Lime never sits on a light surface as text: it is a fill
   (pills, badges, highlights) or text on an ink button. */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:          #f6f7f1;
  --surface:     #fff;
  --surface-2:   #eef0e7;
  --border:      rgba(11, 12, 10, 0.09);
  --text:        #0b0c0a;
  --muted:       #5c5f56;
  --accent-text: var(--text);
  --btn-bg:      #0b0c0a;
  --btn-text:    var(--lime);
  --glow:        rgba(196, 242, 73, 0.5);

  --shadow-color:  rgba(11, 12, 10, 0.08);
  --hl-color:      var(--text);          /* .hl word: ink on a lime marker stripe */
  --hl-stripe:     var(--lime);
  --focus-halo:    0 0 0 6px var(--text); /* dark ring behind the lime outline */
  --hero-grid:     var(--border);
}

/* ── Dark ─────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0a0a09;
  --surface:     #121311;
  --surface-2:   #1a1b18;
  --border:      rgba(255, 255, 255, 0.08);
  --text:        #f3f4ef;
  --muted:       #9b9e94;
  --accent-text: var(--lime);
  --btn-bg:      var(--lime);
  --btn-text:    var(--on-lime);
  --glow:        rgba(196, 242, 73, 0.16);

  --shadow-color:  rgba(0, 0, 0, 0.55);
  --hl-color:      var(--accent-text);   /* .hl word: lime text */
  --hl-stripe:     transparent;
  --focus-halo:    none;
  --hero-grid:     transparent;          /* no grid lines behind the dark hero */
}