/*
 * SolarQuery design tokens: the single place to retheme the site.
 * Colours, type, spacing, radii, elevation and motion are all variables; components only
 * reference these names. Contrast notes are measured against WCAG 2.2 (text 4.5:1, UI 3:1).
 */
:root {
  /* ── Brand: one teal family built on #05BFA5 ───────────────────────────── */
  --brand-50:  #E9FAF7;   /* mint section background, icon tiles            */
  --brand-100: #CFF3EC;   /* tile borders, selected-tile fill               */
  --brand-200: #A6E9DD;
  --brand-300: #5FD9C6;   /* accent text on dark (8.5:1 on ink)             */
  --brand-500: #05BFA5;   /* glow, fills, accents on dark. Decorative on white (2.3:1) */
  --brand-600: #049E89;   /* meaningful icons on white / mint (3.4:1 / 3.1:1) */
  --brand-700: #04806F;   /* filled buttons + links (white text 4.9:1)      */
  --brand-800: #03645A;   /* button hover, text on mint (6.6:1)             */
  --brand-900: #024A43;

  --ink:       #0F2E2B;   /* headings + body text (14.5:1 on white)         */
  --ink-900:   #0A211F;   /* footer                                         */
  --muted:     #4F6965;   /* secondary text (5.9:1 white, 5.5:1 mint)       */
  --line:      #DCE7E4;
  --line-strong: #C3D6D2;
  --surface:   #FFFFFF;
  --surface-2: #F5F8F7;
  --sun:       #F6A91B;   /* solar accent: decorative / on dark only (2.0:1 on white) */

  --on-dark:       #FFFFFF;
  --on-dark-muted: #B8D9D3; /* 9.6:1 on ink */

  /* ── Type ──────────────────────────────────────────────────────────────── */
  /* Noto Sans Devanagari only downloads when Hindi glyphs render (unicode-range). */
  --font-display: "Bricolage Grotesque", "Noto Sans Devanagari", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Manrope", "Noto Sans Devanagari", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-h1:    clamp(2.75rem, 1.55rem + 3.4vw, 4rem);        /* 44 → 64px */
  --fs-h2:    clamp(2rem, 1.6rem + 1.15vw, 2.625rem);       /* 32 → 42px */
  --fs-h3:    clamp(1.375rem, 1.25rem + .35vw, 1.625rem);   /* 22 → 26px */
  --fs-h4:    1.1875rem;                                    /* 19px      */
  --fs-lead:  clamp(1.125rem, 1.05rem + .25vw, 1.25rem);    /* 18 → 20px */
  --fs-body:  clamp(1rem, .95rem + .15vw, 1.0625rem);       /* 16 → 17px */
  --fs-card:  1rem;                                         /* 16px      */
  --fs-label: .9375rem;                                     /* 15px      */
  --fs-meta:  .875rem;                                      /* 14px: the floor, nothing smaller */

  --lh-display: 1.04;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --measure:    66ch;

  /* ── Space ─────────────────────────────────────────────────────────────── */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;  --sp-5: 1.5rem;
  --sp-6: 2rem;    --sp-7: 3rem;   --sp-8: 4rem;   --sp-9: 6rem;
  --section-y: clamp(4rem, 2.6rem + 4.6vw, 7rem);           /* 64 → 112px */
  --gutter:    clamp(1.25rem, .55rem + 3vw, 3.75rem);       /* 20 → 60px  */
  --container: 1370px;

  /* ── Radius: varies by hierarchy ───────────────────────────────────────── */
  --r-widget: 20px;
  --r-band:   16px;
  --r-card:   14px;
  --r-tile:   12px;
  --r-input:  10px;
  --r-chip:   999px;

  /* ── Elevation: teal-tinted, three steps ───────────────────────────────── */
  --sh-1: 0 1px 2px rgba(15, 46, 43, .06), 0 1px 3px rgba(15, 46, 43, .05);
  --sh-2: 0 14px 28px -12px rgba(15, 46, 43, .24), 0 2px 6px rgba(15, 46, 43, .06);
  --sh-3: 0 40px 70px -24px rgba(2, 26, 23, .6), 0 10px 24px -8px rgba(2, 26, 23, .3);

  /* ── Focus: brand-700 on light, brand-500 on dark ──────────────────────── */
  --focus-light: var(--brand-700);
  --focus-dark:  var(--brand-500);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-1: 150ms;
  --dur-2: 240ms;
  --dur-3: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}