/* ============================================================
   VCC, Energy Web Brand Tokens
   Source: Energy Web Brand and Design Skill v2.2
   ============================================================ */

:root {
  /* ---------- PRIMARY, SEMANTIC COLORS ---------- */
  --ew-unverified-red: #E56376;
  --ew-verified-blue:  #5674F1;
  --ew-green:          #74DB8B; /* Decarbonised Green, brand accent */

  /* ---------- MUTED GREENS, 8-step ---------- */
  --ew-green-50:  #DBE4DD;
  --ew-green-100: #C2D3C6;
  --ew-green-200: #AAC1AF;
  --ew-green-300: #91AF98;
  --ew-green-400: #71977A;
  --ew-green-500: #527059;
  --ew-green-600: #405745;
  --ew-green-700: #2E3F32;

  /* ---------- MUTED PURPLES, 8-step ---------- */
  --ew-purple-50:  #DED8DC;
  --ew-purple-100: #C6BCC2;
  --ew-purple-200: #AFA0A9;
  --ew-purple-300: #978490;
  --ew-purple-400: #8B7784;
  --ew-purple-500: #62525C;
  --ew-purple-600: #463B42;
  --ew-purple-700: #2A2327;

  /* ---------- NEUTRALS ---------- */
  --ew-near-white:  #FAFAFA;
  --ew-mint-white:  #F1F9F2;
  --ew-white:       #FFFFFF;
  --ew-grey:        #C4C3C3;
  --ew-grey-dark:   #6A6868;
  --ew-black:       #000000;

  /* ---------- BRAND GRADIENTS ---------- */
  --ew-gradient-1: linear-gradient(to right, #AE8A95, #A7A9CF, #ACC8D4, #B5E2C7);
  --ew-gradient-2: linear-gradient(to right, #AF7E85, #CBA2A8, #E6C6CA);
  --ew-gradient-3: linear-gradient(to right, #F3D2D5, #DDCECA, #C6CABF, #B3C7B5);
  --ew-gradient-4: linear-gradient(to right, #BB8D94, #937579, #6B5E5F, #504E4E);
  --ew-gradient-5: linear-gradient(to right, #55735B, #657166, #747071, #816F7A);
  --ew-gradient-6: linear-gradient(to right, #2A2327, #313933, #475C4C, #6B9675);

  /* ---------- TYPOGRAPHY ---------- */
  --font-brand: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale, responsive via clamp
     Matches brand pt values, tuned for web legibility */
  --fs-impact:      clamp(3.5rem, 8vw + 1rem, 9rem);        /* Impact headline */
  --fs-hero:        clamp(2.75rem, 5.5vw + 0.5rem, 5.5rem); /* Hero title */
  --fs-primary:     clamp(1.5rem, 2vw + 0.5rem, 2.25rem);   /* Primary headline */
  --fs-secondary:   clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem); /* Secondary headline */
  --fs-lead:        clamp(1rem, 0.25vw + 0.95rem, 1.125rem);/* Large body, lead paragraph */
  --fs-body:        1.125rem;   /* 18px, brand body spec */
  --fs-body-sm:     1rem;       /* 16px */
  --fs-caption:     0.8125rem;  /* 13px */
  --fs-micro:       0.6875rem;  /* 11px */

  --lh-impact:  0.97;
  --lh-heading: 1.05;
  --lh-body:    1.3;

  --ls-heading: -0.02em;
  --ls-body:    0;
  --ls-label:   0.08em;
  --ls-mono:    0.02em;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

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

  /* ---------- SPACING SCALE (8-point based) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ---------- LAYOUT ---------- */
  --max-w:        1280px;
  --max-w-narrow:  960px;
  --max-w-reading: 720px;
  --page-pad-x:   clamp(20px, 4vw, 48px);
  --section-py:   clamp(80px, 10vw, 160px);
  --nav-height:    72px;

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    520ms;
  --dur-reveal:  700ms;

  /* ============================================================
     THEME TOKENS, default is dark
     Dark surface layered on Green-700 for critical-infrastructure feel
     ============================================================ */

  /* Surfaces */
  --bg:          #141C17; /* Very dark green, slightly deeper than Green-700 */
  --bg-elevated: #1C261E; /* Section alt background */
  --bg-card:     rgba(46, 63, 50, 0.45);    /* Glass card on dark */
  --bg-glass:    rgba(255, 255, 255, 0.025);
  --bg-code:     rgba(46, 63, 50, 0.6);

  /* Borders */
  --border:        rgba(170, 193, 175, 0.12);
  --border-strong: rgba(170, 193, 175, 0.24);
  --border-accent: rgba(116, 219, 139, 0.35);

  /* Text */
  --text-primary:   #FAFAFA;
  --text-secondary: var(--ew-green-200);
  --text-muted:     var(--ew-green-300);
  --text-dim:       var(--ew-green-400);
  --text-on-accent: var(--ew-green-700);

  /* Semantic accents in context */
  --accent:     var(--ew-green);       /* Primary action, success, verified brand */
  --verified:   var(--ew-verified-blue);
  --unverified: var(--ew-unverified-red);

  /* Shadows, very subtle on dark */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 40px rgba(116, 219, 139, 0.15);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(116, 219, 139, 0.35);
}