/* =====================================================
   APPALACHIAN CLEAN ENERGY — DESIGN TOKENS
   Apple HIG system + Appalachian Forest Green accent
   ===================================================== */
:root {
  /* ── Brand ─────────────────────────────────────────── */
  --accent:        #0a6e3c;
  --accent-light:  #12885a;
  --accent-pale:   rgba(10, 110, 60, 0.10);
  --accent-ring:   rgba(10, 110, 60, 0.20);

  /* ── Hero palette (sampled from the rig photo) ──────── */
  --sky:        #5b9fd4;   /* mid Appalachian sky */
  --sky-deep:   #2f6fa8;   /* deeper blue */
  --sky-pale:   #cfdfe9;   /* cloud haze */
  --rig-red:    #cf3a2b;   /* the drilling rig */
  --rig-red-lt: #e85543;
  --grass:      #8ba03f;   /* sunlit foreground grass */
  --grass-deep: #4a5a1e;
  --hills:      #0a1410;   /* near-black forest, deep shade */

  /* ── Font stacks ────────────────────────────────────── */
  --font-display: -apple-system, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-text:    -apple-system, "SF Pro Text",    "Helvetica Neue", Arial, sans-serif;
  --font-rounded: -apple-system, "SF Pro Rounded", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "SF Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

  /* ── Backgrounds ────────────────────────────────────── */
  --bg-primary:           #ffffff;
  --bg-secondary:         #f2f2f7;
  --bg-tertiary:          #ffffff;
  --bg-grouped:           #f2f2f7;
  --bg-grouped-secondary: #ffffff;

  /* ── Labels ─────────────────────────────────────────── */
  --label-primary:    rgba(0,0,0,1.00);
  --label-secondary:  rgba(0,0,0,0.60);
  --label-tertiary:   rgba(0,0,0,0.30);
  --label-quaternary: rgba(0,0,0,0.18);

  /* ── Fills ──────────────────────────────────────────── */
  --fill-primary:    rgba(120,120,128,0.20);
  --fill-secondary:  rgba(120,120,128,0.16);
  --fill-tertiary:   rgba(118,118,128,0.12);
  --fill-quaternary: rgba(116,116,128,0.08);

  /* ── Separators ─────────────────────────────────────── */
  --separator:        rgba(60,60,67,0.29);
  --separator-opaque: #c6c6c8;

  /* ── System colors ──────────────────────────────────── */
  --blue:   #007aff;
  --green:  #34c759;
  --orange: #ff9500;
  --red:    #ff3b30;
  --teal:   #32ade6;
  --yellow: #ffcc00;
  --indigo: #5856d6;
  --mint:   #00c7be;
  --purple: #af52de;

  /* ── Materials (frosted glass) ──────────────────────── */
  --mat-thick:     rgba(255,255,255,0.85);
  --mat-regular:   rgba(255,255,255,0.72);
  --mat-thin:      rgba(255,255,255,0.55);
  --mat-ultrathin: rgba(255,255,255,0.30);
  --mat-chrome:    rgba(246,246,246,0.82);

  /* ── Blur filters ───────────────────────────────────── */
  --blur-thick:     saturate(180%) blur(30px);
  --blur-regular:   saturate(180%) blur(20px);
  --blur-thin:      saturate(180%) blur(12px);
  --blur-ultrathin: saturate(150%) blur(6px);

  /* ── Elevation shadows ──────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-4: 0 16px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-5: 0 32px 80px rgba(0,0,0,0.16), 0 8px 24px rgba(0,0,0,0.08);

  /* ── 8pt spacing grid ───────────────────────────────── */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px; --sp-7:  28px; --sp-8:  32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
  --sp-24: 96px; --sp-32: 128px;

  /* ── Corner radii ───────────────────────────────────── */
  --r-xs:   4px;  --r-sm:   8px;  --r-md:   12px;
  --r-lg:   16px; --r-xl:   20px; --r-2xl:  28px;
  --r-pill: 9999px;

  /* ── Motion curves ──────────────────────────────────── */
  --spring-snap:   cubic-bezier(0.5, 1.8, 0.5, 0.8);
  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:      cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:    cubic-bezier(0.37, 0, 0.63, 1);
  --ease-std:      cubic-bezier(0.2, 0, 0, 1);

  /* ── Duration scale ─────────────────────────────────── */
  --t-0: 80ms;  --t-1: 150ms; --t-2: 250ms; --t-3: 350ms;
  --t-4: 500ms; --t-5: 700ms; --t-6: 1000ms;
}

/* ── Dark mode overrides ────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --accent:        #1cb865;
    --accent-light:  #28d47a;
    --accent-pale:   rgba(28, 184, 101, 0.12);
    --accent-ring:   rgba(28, 184, 101, 0.25);

    --bg-primary:           #000000;
    --bg-secondary:         #1c1c1e;
    --bg-tertiary:          #2c2c2e;
    --bg-grouped:           #000000;
    --bg-grouped-secondary: #1c1c1e;

    --label-primary:    rgba(255,255,255,1.00);
    --label-secondary:  rgba(255,255,255,0.60);
    --label-tertiary:   rgba(255,255,255,0.30);
    --label-quaternary: rgba(255,255,255,0.18);

    --fill-primary:    rgba(120,120,128,0.36);
    --fill-secondary:  rgba(120,120,128,0.32);
    --fill-tertiary:   rgba(118,118,128,0.24);
    --fill-quaternary: rgba(116,116,128,0.18);

    --separator:        rgba(84,84,88,0.65);
    --separator-opaque: #38383a;

    --mat-thick:     rgba(28,28,30,0.88);
    --mat-regular:   rgba(28,28,30,0.75);
    --mat-thin:      rgba(28,28,30,0.58);
    --mat-ultrathin: rgba(28,28,30,0.32);
    --mat-chrome:    rgba(30,30,32,0.85);

    --shadow-1: 0 1px 2px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.08);
    --shadow-2: 0 2px 8px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.12);
    --shadow-3: 0 8px 24px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.16);
    --shadow-4: 0 16px 48px rgba(0,0,0,0.36), 0 4px 12px rgba(0,0,0,0.20);
    --shadow-5: 0 32px 80px rgba(0,0,0,0.48), 0 8px 24px rgba(0,0,0,0.28);
  }
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-0: 0ms; --t-1: 0ms; --t-2: 0ms; --t-3: 0ms;
    --t-4: 0ms; --t-5: 0ms; --t-6: 0ms;
  }
}