/* ==========================================================================
   sdatoken.org design tokens
   Light is the default. Dark follows prefers-color-scheme or [data-theme].
   Reference feel: Duolingo (shell/games) + Electricity Maps/Linear (data).
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --color-primary: #1fb25a; /* volt green – the one saturated accent */
  --color-primary-strong: #178f48; /* pressed / 3D button edge */
  --color-primary-soft: #e6f7ec; /* tints, selected states */
  --color-primary-ink: #0d5c2c; /* text on primary-soft */

  --color-spark: #ffc53d; /* energy yellow – highlights, streaks */
  --color-spark-strong: #e0a800;
  --color-spark-soft: #fff5d6;

  --color-sky: #2f80ed; /* links, data emphasis */
  --color-sky-strong: #1f63c2;
  --color-sky-soft: #e8f0fd;

  --color-danger: #ef4444;
  --color-danger-strong: #c73333;
  --color-danger-soft: #fdeaea;

  /* Button fills. The accents above are tuned for data surfaces (bars, pills,
     maps) where the 3:1 non-text rule applies; a white button label at 17px needs
     4.5:1, which #1fb25a (2.8:1), #2f80ed (3.9:1) and #ef4444 (3.8:1) miss. These
     darker fills are used only by .btn variants (QA part 19). */
  /* Link ink. --color-sky is only 3.4-3.9:1 on the light surfaces, so links get a
     darker blue; the dark theme needs a lighter one instead. */
  --color-link: #2569c4; /* 5.4:1 on #fff, 4.8:1 on --color-surface-2 */

  /* Text-safe versions of the accents, for small coloured labels on light
     surfaces (.tile__live). The bright accents are 2.1-4.0:1 on white. */
  --color-spark-ink: #7d5f00; /* 6.0:1 with #fff */
  --color-purple-ink: #8b3fd4; /* 5.6:1 with #fff */

  --color-primary-btn: #127f3f; /* 5.1:1 with #fff */
  --color-primary-btn-edge: #0c5629;
  --color-sky-btn: #2569c4; /* 5.4:1 with #fff */
  --color-sky-btn-edge: #17509e;
  --color-danger-btn: #d13030; /* 5.0:1 with #fff */
  --color-danger-btn-edge: #a52626;

  --color-warn: #f59e0b;
  --color-warn-soft: #fef3dd;

  /* ---- Neutrals ------------------------------------------------------- */
  --color-bg: #f6f8fb; /* page ground */
  --color-surface: #ffffff; /* cards */
  --color-surface-2: #eef2f7; /* wells, tracks, table stripes */
  --color-border: #e2e7ef;
  --color-border-strong: #cbd3df;
  --color-ink: #1b1f2a; /* body text */
  --color-ink-muted: #5b6472; /* secondary text */
  --color-ink-faint: #646c7a; /* labels, placeholders — 5.3:1 on white (WCAG AA) */
  --color-inverse: #ffffff;

  /* ---- Carbon intensity scale (gCO2/kWh) – meaning, not decoration ---- */
  --scale-c0: #22c55e; /* < 100  */
  --scale-c1: #a3e635; /* 100–200 */
  --scale-c2: #facc15; /* 200–350 */
  --scale-c3: #f97316; /* 350–500 */
  --scale-c4: #dc2626; /* 500–700 */
  --scale-c5: #7f1d1d; /* > 700  */

  /* ---- Energy sources ------------------------------------------------- */
  --src-nuclear: #a855f7;
  --src-hydro: #38bdf8;
  --src-wind: #22c55e;
  --src-solar: #fbbf24;
  --src-biomass: #84cc16;
  --src-geothermal: #f472b6;
  --src-waste: #14b8a6;
  --src-marine: #06b6d4;
  --src-other-renewable: #4ade80;
  --src-gas: #fb923c;
  --src-coal: #52525b;
  --src-oil: #92400e;
  --src-peat: #78350f;
  --src-oil-shale: #6b7280;
  --src-thermal: #f97316;
  --src-other: #94a3b8;

  /* ---- Type ----------------------------------------------------------- */
  --font-sans:
    'Nunito', 'SF Pro Rounded', ui-rounded, 'Segoe UI Variable', 'Segoe UI', system-ui,
    -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --text-xs: 0.8125rem; /* 13px – labels only, never body */
  --text-sm: 0.9375rem; /* 15px */
  --text-md: 1.0625rem; /* 17px – body */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5625rem; /* 25px */
  --text-2xl: 2rem; /* 32px */
  --text-3xl: 2.625rem; /* 42px */
  --text-4xl: 3.5rem; /* 56px – hub numbers */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  --weight-regular: 500; /* rounded fonts read light; nudge up */
  --weight-bold: 700;
  --weight-black: 800;

  /* ---- Space (4px grid) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Shape ---------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --border-w: 2px; /* Duolingo-style visible card edges */

  /* ---- Elevation (flat + edge, not blur) ----------------------------- */
  --shadow-edge: 0 2px 0 var(--color-border);
  --shadow-edge-strong: 0 4px 0 var(--color-border-strong);
  --shadow-float: 0 8px 24px rgba(27, 31, 42, 0.08);
  --shadow-pop: 0 16px 40px rgba(27, 31, 42, 0.14);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* ---- Shell (chess.com-style: dark rail on desktop, tab bar on mobile) --- */
  --rail-bg: #141a24; /* sidebar ground */
  --rail-bg-2: #1c2431; /* hover / active well */
  --rail-ink: #e6ebf3;
  --rail-ink-muted: #8f9aab;
  --rail-accent: #34d074; /* active item + brand mark on dark */
  --rail-w: 232px;

  /* ---- Extra colour for a lighter page (hero, section accents) --------- */
  --color-brand-deep: #0f6b3f; /* deep green for large surfaces */
  --color-teal: #0e9f8a;
  --color-violet: #6d4de6;
  --color-coral: #f2643f;
  --grad-hero: linear-gradient(135deg, #0f6b3f 0%, #178f48 45%, #0e9f8a 100%);
  --grad-spark: linear-gradient(135deg, #ffb703 0%, #ff8a3d 100%);
  --grad-violet: linear-gradient(135deg, #6d4de6 0%, #a855f7 100%);
  --grad-sky: linear-gradient(135deg, #1f63c2 0%, #38bdf8 100%);

  /* ---- Layout --------------------------------------------------------- */
  --container: 1120px; /* legacy cap; .container now uses % of viewport */
  --container-wide: 1360px;
  --container-max: 1760px; /* ultrawide safety cap for the 80 % rule */
  --header-h: 60px;
  --tabbar-h: 62px;

  color-scheme: light;
}

/* ---- Dark ------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg: #0f131a;
    --color-surface: #171c25;
    --color-surface-2: #1f2633;
    --color-border: #2a3341;
    --color-border-strong: #3a4657;
    --color-ink: #eef2f7;
    --color-ink-muted: #a6b0bf;
    --color-ink-faint: #949dab;
    --color-link: #7db3ff;
    --color-inverse: #0f131a;
    --color-primary-soft: #113a22;
    --color-primary-ink: #9ae6b4;
    --color-spark-soft: #3d3010;
    --color-sky-soft: #14284a;
    --color-danger-soft: #3d1717;
    --color-warn-soft: #3d2b0f;
    --shadow-edge: 0 2px 0 #0b0e13;
    --shadow-edge-strong: 0 4px 0 #0b0e13;
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --color-bg: #0f131a;
  --color-surface: #171c25;
  --color-surface-2: #1f2633;
  --color-border: #2a3341;
  --color-border-strong: #3a4657;
  --color-ink: #eef2f7;
  --color-ink-muted: #a6b0bf;
  --color-ink-faint: #949dab;
  --color-link: #7db3ff;
  --color-inverse: #0f131a;
  --color-primary-soft: #113a22;
  --color-primary-ink: #9ae6b4;
  --color-spark-soft: #3d3010;
  --color-sky-soft: #14284a;
  --color-danger-soft: #3d1717;
  --color-warn-soft: #3d2b0f;
  --shadow-edge: 0 2px 0 #0b0e13;
  --shadow-edge-strong: 0 4px 0 #0b0e13;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}