/* ============================================================
   SolarPlants — Design Tokens v2
   Ink & Copper palette · Fraunces + Inter typography
   Source of truth: brand-brief.md §7 · Brand-Manual-Ink-Copper-v1.md
   Revolut-paradigm applied · 80/15/5 colour ratio · 4 pt baseline grid
   ============================================================ */

:root {
  /* ---------- COLOR — Ink & Copper palette (Brand Manual §2.1) ---------- */
  --ink:        #0E1A24;   /* Ink-marine: primary text, dark surfaces, logo */
  --slate:      #2A3942;   /* Slate: secondary text + secondary background */
  --copper:     #B87333;   /* Copper: CTA + single accent — one per view */
  --copper-h:   #C9893F;   /* Copper hover */
  --patina:     #8C5A28;   /* Copper darker tint, rare */
  --bone:       #F4F1EC;   /* Warm Bone: main background (80 %) */
  --bone-2:     #EDE9E1;   /* Bone secondary surface */
  --bone-3:     #E4DFD5;   /* Bone tertiary, dividers on bone */
  --grey:       #7A8A92;   /* Cool Grey: hairlines + captions */
  --grey-soft:  #C7CDD0;   /* Cool Grey light: dividers on bone */
  --white:      #FFFFFF;   /* Pure white: limited use */

  /* Atmospheric — derived from palette, used for hero gradients only */
  --ink-deeper:  #0A141C;
  --ink-glow:    rgba(184, 115, 51, 0.10);   /* Copper glow */
  --slate-glow:  rgba(42, 57, 66, 0.55);
  --hairline-on-ink: rgba(244, 241, 236, 0.10);
  --text-on-ink:     rgba(244, 241, 236, 0.86);
  --text-on-ink-soft: rgba(244, 241, 236, 0.58);
  --text-on-ink-faint: rgba(244, 241, 236, 0.40);

  /* Semantic roles */
  --bg:         var(--bone);
  --bg-alt:     var(--bone-2);
  --bg-dark:    var(--ink);
  --text:       var(--ink);
  --text-mute:  var(--slate);
  --text-soft:  var(--grey);
  --text-on-dark: var(--bone);
  --accent:     var(--copper);
  --accent-h:   var(--copper-h);
  --border:     var(--bone-3);
  --border-strong: var(--grey-soft);

  /* ---------- TYPOGRAPHY (Brand Manual §3) ---------- */
  --serif:      "Fraunces", "Times New Roman", Georgia, serif;
  --sans:       "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale — clamp(min, preferred, max) — per Brand Manual §3.2 */
  --t-display-xl:  clamp(56px, 10vw, 144px);   /* Hero on Home (Editorial 144 max) */
  --t-display-l:   clamp(48px, 7.5vw, 104px);  /* Page heroes */
  --t-display-m:   clamp(40px, 5.6vw, 72px);   /* Section heroes (H2 desktop 56) */
  --t-display-s:   clamp(32px, 4.0vw, 56px);
  --t-h1:          clamp(32px, 3.6vw, 56px);
  --t-h2:          clamp(24px, 2.6vw, 40px);
  --t-h3:          clamp(20px, 2.0vw, 28px);
  --t-h4:          20px;
  --t-body-lg:     clamp(18px, 1.4vw, 20px);
  --t-body:        17px;
  --t-body-sm:     15px;
  --t-meta:        13px;
  --t-eyebrow:     12px;

  --lh-display:    1.04;
  --lh-display-tight: 1.0;
  --lh-heading:    1.18;
  --lh-body:       1.62;
  --lh-tight:      1.35;

  /* Letter-spacing per Brand Manual §3.2 */
  --tracking-display: -0.025em;   /* Hero -2.5 % */
  --tracking-h2:      -0.020em;   /* H2 -2.0 % */
  --tracking-h3:      -0.010em;   /* H3 -1.0 % */
  --tracking-body:    0;
  --tracking-eyebrow: 0.12em;     /* +12 % per brand manual */
  --tracking-button:  0.012em;    /* +1.2 % per brand manual */
  --tracking-mono:    0.04em;

  /* ---------- SPACING (4 pt baseline, Brand Manual §4.1) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   80px;
  --sp-10:  96px;
  --sp-11:  128px;
  --sp-12:  160px;

  /* Section vertical rhythm (fluid) — Brand Manual §4.3 hero ≥ 96 px breath */
  --section-py:        clamp(80px, 10vw, 160px);
  --section-py-tight:  clamp(56px, 7vw, 112px);

  /* Layout (Brand Manual §4.2) */
  --max-w:       1280px;
  --max-w-prose: 720px;
  --max-w-text:  640px;
  --gutter:      clamp(20px, 4vw, 80px);

  /* ---------- RADII (Brand Manual §8.1 — CTAs 4 px) ---------- */
  --r-xs:    2px;
  --r-sm:    4px;        /* CTA radius per brand manual §8.1 */
  --r-md:    8px;
  --r-lg:    14px;
  --r-xl:    24px;
  --r-pill:  999px;

  /* ---------- SHADOWS ---------- */
  --shadow-soft: 0 1px 3px rgba(14, 26, 36, 0.05), 0 8px 30px rgba(14, 26, 36, 0.06);
  --shadow-deep: 0 4px 20px rgba(14, 26, 36, 0.10), 0 30px 80px rgba(14, 26, 36, 0.14);
  --shadow-lift: 0 24px 60px -28px rgba(14, 26, 36, 0.45);
  --shadow-copper-glow: 0 16px 50px -22px rgba(184, 115, 51, 0.55);
  --shadow-on-dark: 0 1px 0 rgba(244, 241, 236, 0.06), 0 30px 80px rgba(0, 0, 0, 0.30);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-mech:   cubic-bezier(0.16, 1, 0.30, 1);     /* Premium spring */
  --t-fast:      160ms;
  --t-base:      280ms;
  --t-slow:      640ms;
  --t-drift:     22s;                                /* Ambient orb drift */

  /* ---------- LAYOUT TOKENS ---------- */
  --nav-h:        72px;
  --nav-h-mobile: 60px;
  --progress-h:   2px;
  --z-progress:   90;
  --z-nav:        100;
  --z-overlay:    150;
  --z-drawer:     200;
  --z-sticky-cta: 80;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:  0ms;
    --t-base:  0ms;
    --t-slow:  0ms;
    --t-drift: 0s;
  }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}