/* ============================================================
   ERS ENERGY — DESIGN TOKEN SYSTEM
   tokens.css — all CSS custom properties
   Light mode defaults; dark mode via [data-theme="dark"]
   ============================================================

   BREAKPOINT CONVENTION (mobile-first for new code, 2026-05-24):
     sm = 640px   — large phones
     md = 1024px  — tablets, small laptops
     lg = 1280px  — desktops
   CSS doesn't allow @media (min-width: var(--bp-sm)) yet, so these
   are documentation tokens. Authors should hand-write breakpoints
   using 640 / 1024 / 1280 only. Existing legacy max-width queries
   (600, 767, 768, 900, 1024) are left alone unless we're already
   editing that file — refactoring them would be churn for no gain.
   ============================================================ */


/* ============================================================
   LIGHT MODE DEFAULTS
   ============================================================ */
:root {
  /* --- Backgrounds --- */
  --bg-page:       #ffffff;
  --bg-surface:    #f3f3f3;
  --bg-elevated:   #ffffff;
  --bg-overlay:    rgba(255,255,255,0.85);
  --bg-nav:        rgba(255,255,255,0.88);
  --bg-cta:        #0d0d0d;

  /* --- Text --- */
  --text-primary:   #0d0d0d;
  --text-secondary: #444444;
  --text-muted:     #888888;
  --text-inverse:   #ffffff;
  --text-on-orange: #ffffff;

  /* --- Brand Accents (same both modes) --- */
  --accent-orange:  #f26522;
  --accent-orange-dim: rgba(242,101,34,0.85);
  --accent-teal:    #669998;
  --accent-teal-dim: rgba(102,153,152,0.85);

  /* --- Glow / Atmosphere --- */
  --glow-orange:    rgba(242,101,34,0.18);
  --glow-orange-lg: rgba(242,101,34,0.25);
  --glow-teal:      rgba(102,153,152,0.18);
  --glow-teal-lg:   rgba(102,153,152,0.22);
  --glow-hero:      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(242,101,34,0.10) 0%, transparent 70%);

  /* --- Borders --- */
  --border:         rgba(0,0,0,0.09);
  --border-strong:  rgba(0,0,0,0.16);
  --border-orange:  rgba(242,101,34,0.30);
  --border-teal:    rgba(102,153,152,0.28);

  /* --- Shadows --- */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.10);
  --shadow-card:    0 2px 8px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 0 0 1px rgba(242,101,34,0.35), 0 0 28px rgba(242,101,34,0.15), 0 8px 24px rgba(0,0,0,0.12);
  --shadow-card-default: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06);
  --shadow-nav:     0 1px 0 rgba(0,0,0,0.07);

  /* --- Radii --- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* --- Spacing (4px base) --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* --- Type Scale --- */
  --type-xs:   0.75rem;   /* 12px */
  --type-sm:   0.8125rem; /* 13px */
  --type-base: 1rem;      /* 16px */
  --type-lg:   1.125rem;  /* 18px */
  --type-xl:   1.25rem;   /* 20px */
  --type-2xl:  1.5rem;    /* 24px */
  --type-3xl:  1.875rem;  /* 30px */
  --type-4xl:  2.25rem;   /* 36px */
  --type-5xl:  3rem;      /* 48px */
  --type-6xl:  3.75rem;   /* 60px */
  --type-7xl:  4.5rem;    /* 72px */
  --type-8xl:  6rem;      /* 96px */

  /* --- Font Weights --- */
  --fw-light:      300;
  --fw-normal:     400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* --- Line Heights --- */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  /* --- Transitions --- */
  --transition-fast:   100ms ease;
  --transition-base:   150ms ease;
  --transition-slow:   250ms ease;
  --transition-smooth: 350ms cubic-bezier(0.16,1,0.3,1);

  /* --- Z-index stack --- */
  --z-base:    1;
  --z-above:   10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;

  /* --- Layout --- */
  --container-max: 1280px;
  --container-pad: clamp(var(--sp-4), 5vw, var(--sp-12));
  --section-py:    clamp(var(--sp-16), 8vw, var(--sp-32));
}

/* ============================================================
   DARK MODE OVERRIDE LAYER
   ============================================================ */
[data-theme="dark"] {
  --bg-page:       #0a0a0a;
  --bg-surface:    #111111;
  --bg-elevated:   #1a1a1a;
  --bg-overlay:    rgba(10,10,10,0.88);
  --bg-nav:        rgba(10,10,10,0.88);
  --bg-cta:        #111111;

  --text-primary:   #ededed;
  --text-secondary: #a8a8a8;
  --text-muted:     #555555;
  --text-inverse:   #0a0a0a;

  --border:         rgba(255,255,255,0.07);
  --border-strong:  rgba(255,255,255,0.13);
  --border-orange:  rgba(242,101,34,0.30);
  --border-teal:    rgba(102,153,152,0.28);

  --shadow-sm:      0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.6);
  --shadow-card:    0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-card-hover: 0 0 0 1px rgba(242,101,34,0.40), 0 0 36px rgba(242,101,34,0.18), 0 8px 32px rgba(0,0,0,0.5);
  --shadow-card-default: none;
  --shadow-nav:     0 1px 0 rgba(255,255,255,0.06);

  --glow-hero:      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(242,101,34,0.14) 0%, transparent 70%);
}