/* ============================================================
   CARBOTURA DESIGN TOKENS v2.1
   Source: brand.carbotura.com/assets/v2/tokens/tokens.css
   Local copy for development — swap href to CDN when brand
   site is live on Cloudflare.
   ============================================================ */

:root {

  /* ── Brand Colors ── */
  --cb-emerald:       #059669;   /* Sustain Emerald — community, sustainability, CTAs */
  --cb-emerald-mid:   #047857;   /* Darker emerald for hover states */
  --cb-emerald-light: #d1fae5;   /* Light emerald for backgrounds */
  --cb-blue:          #007FFF;   /* Systems Blue — nav, topbar mark, universal */
  --cb-blue-mid:      #0066cc;   /* Darker blue for hover */
  --cb-blue-light:    #dbeafe;   /* Light blue for backgrounds */
  --cb-magenta:       #FF007F;   /* Conversion Magenta — investor, hero moments */
  --cb-violet:        #7C3AED;   /* EcoGraph Violet — materials, carbon products */
  --cb-amber:         #D97706;   /* Waste Amber — waste-study, regulatory warnings */
  --cb-amber-light:   #fef3c7;
  --cb-slate:         #0F172A;   /* Deep Slate — dark backgrounds, hero */
  --cb-steel:         #475569;   /* Forged Steel — secondary text, universal */

  /* ── Neutral Scale ── */
  --cb-dark:          #1A202C;   /* Primary dark — body text, topbar */
  --cb-mid:           #4A5568;   /* Secondary text */
  --cb-muted:         #6B7280;   /* Muted text, labels */
  --cb-rule:          #E2E8F0;   /* Borders, dividers */
  --cb-surface:       #F1F5F9;   /* Card backgrounds, alternating sections */
  --cb-page:          #FAFAF9;   /* Page background — warm off-white */
  --cb-white:         #FFFFFF;

  /* ── Typography ── */
  --font-brand:  'Audiowide', sans-serif;
  --font-body:   'Inter', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;

  /* ── Type Scale ── */
  --text-xs:     0.6875rem;  /* 11px */
  --text-sm:     0.8125rem;  /* 13px */
  --text-base:   1.0625rem;  /* 17px */
  --text-lg:     1.125rem;   /* 18px */
  --text-xl:     1.25rem;    /* 20px */
  --text-2xl:    1.5rem;     /* 24px */
  --text-3xl:    1.875rem;   /* 30px */
  --text-4xl:    2.25rem;    /* 36px */
  --text-5xl:    3rem;       /* 48px */
  --text-hero:   clamp(2.5rem, 6vw, 5rem);
  --text-section:clamp(1.75rem, 3.5vw, 3rem);
  --text-card:   clamp(1.125rem, 2vw, 1.5rem);

  /* ── Spacing (8px base) ── */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* ── Layout ── */
  --max-width:      1200px;
  --content-width:  72ch;
  --topbar-height:  56px;
  --section-pad-v:  clamp(var(--sp-12), 8vw, var(--sp-24));

  /* ── Radii ── */
  --radius-sm:  4px;
  --radius:     6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full:9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow:     0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-md:  0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);

  /* ── Transitions ── */
  --ease:       cubic-bezier(.4,0,.2,1);
  --duration:   150ms;
  --duration-md:250ms;
}

/* Dark mode overrides */
[data-theme="dark"] {
  --cb-page:    #0A0C10;
  --cb-surface: #111827;
  --cb-rule:    #1F2937;
  --cb-dark:    #F9FAFB;
  --cb-mid:     #D1D5DB;
  --cb-muted:   #9CA3AF;
  --cb-white:   #1A202C;
}