/* ==========================================================================
   Future Power — tokens.css
   All design decisions as CSS custom properties. Swap the palette here.
   Consumed by every other stylesheet + both SSR and JS render paths.
   ========================================================================== */

:root {
  /* --- Brand palette (raw) --- */
  --forest-900: #0E2614;
  --forest-800: #163A1E;
  --forest-700: #1F5A2C;
  --forest-600: #2E7D3A;
  --forest-500: #4A9E54;
  --forest-100: #DDEBD9;
  --forest-50:  #EEF5EA;

  --sun-600: #C97B0A;
  --sun-500: #E8941A;
  --sun-400: #F5B324;
  --sun-300: #FBD267;
  --sun-100: #FCEBB6;
  --sun-50:  #FDF6DE;

  --paper:    #FBF8F2;
  --paper-2:  #F4EFE3;
  --ink:      #0E1A14;
  --ink-2:    #2A3A2F;
  --muted:    #6B7A6F;
  --line:     #E2DDD0;
  --line-2:   #C9C2B0;
  --white:    #FFFFFF;

  /* --- Semantic aliases (use these in components) --- */
  --color-bg:            var(--paper);
  --color-bg-sunk:       var(--paper-2);
  --color-surface:       var(--white);
  --color-surface-2:     var(--forest-50);
  --color-inverse:       var(--ink);
  --color-inverse-deep:  var(--forest-900);

  --color-text:          var(--ink);
  --color-text-2:        var(--ink-2);
  --color-text-muted:    var(--muted);
  --color-text-on-dark:  rgba(255,255,255,.82);
  --color-text-on-dark-muted: rgba(255,255,255,.55);

  --color-primary:       var(--forest-700);
  --color-primary-hover: var(--forest-800);
  --color-accent:        var(--sun-400);
  --color-accent-hover:  var(--sun-300);
  --color-accent-ink:    var(--ink);

  --color-line:          var(--line);
  --color-line-strong:   var(--line-2);
  --color-line-on-dark:  rgba(255,255,255,.14);

  --color-success:       var(--forest-600);
  --color-danger:        #B4442E;
  --color-danger-bg:     #FBEAE5;
  --color-sale:          var(--sun-400);

  --color-link:          var(--forest-700);
  --color-link-hover:    var(--forest-800);

  --focus-ring:          0 0 0 3px var(--sun-300), 0 0 0 5px var(--forest-700);

  /* --- Typography --- */
  --font-display: "Bricolage Grotesque", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --track-tight: -0.02em;
  --track-snug:  -0.01em;
  --track-wide:  0.02em;
  --track-caps:  0.14em;

  /* Fluid type scale (mobile → desktop) */
  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 6rem);   /* 44 → 96 */
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.6vw, 4rem);   /* 36 → 64 */
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.4vw, 3.5rem);  /* ~30 → 56 */
  --fs-h3:      clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-2xs:     0.6875rem;

  /* --- Spacing scale (rem) --- */
  --space-0: 0;
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Radius --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Shadow --- */
  --shadow-sm: 0 1px 2px rgba(14,26,20,.06), 0 0 0 1px rgba(14,26,20,.04);
  --shadow-md: 0 8px 24px rgba(14,26,20,.08), 0 1px 2px rgba(14,26,20,.04);
  --shadow-lg: 0 24px 48px rgba(14,26,20,.12);

  /* --- Layout --- */
  --container-max: 1440px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --header-h: 76px;

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .15s;
  --dur: .25s;

  /* --- Z-index scale --- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-drawer: 500;
  --z-toast: 600;
}

/* Optional dark merchandising sections read these */
.on-dark {
  --color-text: #fff;
  --color-text-2: var(--color-text-on-dark);
  --color-text-muted: var(--color-text-on-dark-muted);
  --color-line: var(--color-line-on-dark);
  --color-surface: rgba(255,255,255,.05);
  --color-link: var(--sun-400);
  --color-link-hover: var(--sun-300);
}