/* ==========================================================================
   Sai Bioenergy — Design Tokens
   Single source of truth for the brand. Every value below maps 1:1 to a
   WordPress theme.json token when this site is migrated.

   Brand colours sampled directly from Sai Bioenergy_Final.jpeg:
     Primary Blue        #0C4CA3   (wordmark + lower arrow)
     Primary Green       #00A652   (upper-right arrow)
     Light Green Accent  #8CC63E   (3F roundel)
     Earth Brown         #5C1F0D   (upper-left arrow)
   ========================================================================== */

:root {
  /* ---- Brand: Primary Blue ------------------------------------------ */
  --sbe-blue-950: #05203F;
  --sbe-blue-900: #072F63;
  --sbe-blue-800: #093C80;
  --sbe-blue-700: #0C4CA3; /* PRIMARY BLUE — brand anchor */
  --sbe-blue-600: #135FC4;
  --sbe-blue-500: #2C7AE0;
  --sbe-blue-300: #8AB4E8;
  --sbe-blue-200: #C2D8F4;
  --sbe-blue-100: #E4EEFA;
  --sbe-blue-50:  #F3F8FD;

  /* ---- Brand: Primary Green ----------------------------------------- */
  --sbe-green-900: #00532A;
  --sbe-green-800: #007A3D;
  --sbe-green-700: #00A652; /* PRIMARY GREEN */
  --sbe-green-600: #12BC65;
  --sbe-green-400: #5FD79A;
  --sbe-green-200: #B4EDCF;
  --sbe-green-100: #DEF6E9;
  --sbe-green-50:  #F1FCF6;

  /* ---- Brand: Light Green Accent ------------------------------------ */
  --sbe-lime-800: #4E7418;
  --sbe-lime-700: #6BA028;
  --sbe-lime-600: #8CC63E; /* LIGHT GREEN ACCENT */
  --sbe-lime-400: #B2DC76;
  --sbe-lime-200: #DCEFB8;
  --sbe-lime-100: #EFF8DF;

  /* ---- Brand: Earth Brown ------------------------------------------- */
  --sbe-brown-900: #3A1408;
  --sbe-brown-700: #5C1F0D; /* EARTH BROWN */
  --sbe-brown-500: #8A4A34;
  --sbe-brown-300: #BE9384;
  --sbe-brown-100: #F2E9E5;

  /* ---- Neutrals (cool, blue-biased to sit with the brand blue) ------ */
  --sbe-ink:       #0D1726; /* body copy, headings */
  --sbe-ink-soft:  #34415A;
  --sbe-muted:     #667491;
  --sbe-muted-2:   #93A0B5;
  --sbe-line:      #E2E8F0;
  --sbe-line-soft: #EFF3F8;
  --sbe-surface:   #FFFFFF;
  --sbe-surface-2: #F7FAFC;
  --sbe-surface-3: #EFF4F9;

  /* ---- Semantic roles ------------------------------------------------ */
  --color-bg:            var(--sbe-surface);
  --color-bg-alt:        var(--sbe-surface-2);
  --color-text:          var(--sbe-ink);
  --color-text-soft:     var(--sbe-ink-soft);
  --color-text-muted:    var(--sbe-muted);
  --color-heading:       var(--sbe-blue-950);
  --color-primary:       var(--sbe-blue-700);
  --color-primary-hover: var(--sbe-blue-800);
  --color-accent:        var(--sbe-green-700);
  --color-accent-2:      var(--sbe-lime-600);
  --color-border:        var(--sbe-line);
  --color-focus:         var(--sbe-green-700);

  /* ---- Brand gradients (soft, bright — never heavy) ----------------- */
  --grad-hero:    linear-gradient(148deg, #072F63 0%, #0C4CA3 42%, #00713A 100%);
  --grad-sky:     linear-gradient(180deg, #F3F8FD 0%, #FFFFFF 100%);
  --grad-leaf:    linear-gradient(135deg, #DEF6E9 0%, #EFF8DF 100%);
  --grad-mist:    linear-gradient(135deg, #E4EEFA 0%, #F7FAFC 60%, #EFF8DF 100%);
  --grad-loop:    conic-gradient(from 210deg, #5C1F0D 0deg, #00A652 120deg, #0C4CA3 240deg, #5C1F0D 360deg);
  --grad-accent:  linear-gradient(90deg, var(--sbe-green-700), var(--sbe-lime-600));
  --grad-overlay: linear-gradient(180deg, rgba(5,32,63,.62) 0%, rgba(5,32,63,.28) 45%, rgba(5,32,63,.78) 100%);

  /* ---- Typography ---------------------------------------------------- */
  --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', Menlo, monospace;

  /* Fluid scale — 320px → 1600px viewport */
  --fs-eyebrow: clamp(0.6875rem, 0.66rem + 0.14vw, 0.8125rem);
  --fs-xs:      clamp(0.75rem,  0.73rem + 0.1vw,  0.8125rem);
  --fs-sm:      clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --fs-base:    clamp(1rem,     0.97rem + 0.16vw, 1.0625rem);
  --fs-lg:      clamp(1.0625rem,1.02rem + 0.24vw, 1.1875rem);
  --fs-lede:    clamp(1.125rem, 1.05rem + 0.4vw,  1.375rem);
  --fs-h5:      clamp(1.0625rem,1rem + 0.3vw,     1.25rem);
  --fs-h4:      clamp(1.25rem,  1.15rem + 0.5vw,  1.625rem);
  --fs-h3:      clamp(1.5rem,   1.3rem + 1vw,     2.125rem);
  --fs-h2:      clamp(1.875rem, 1.5rem + 1.9vw,   3.125rem);
  --fs-h1:      clamp(2.25rem,  1.7rem + 2.9vw,   4.25rem);
  --fs-display: clamp(2.625rem, 1.7rem + 4.6vw,   5.75rem);
  --fs-counter: clamp(2rem,     1.5rem + 2.4vw,   3.5rem);

  --lh-tight:   1.04;
  --lh-heading: 1.14;
  --lh-snug:    1.35;
  --lh-body:    1.68;

  --tracking-eyebrow: 0.16em;
  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.014em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-x:       800;

  /* ---- Spacing (4px base) -------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 1.75rem;  --sp-8: 2rem;
  --sp-10: 2.5rem;  --sp-12: 3rem;    --sp-14: 3.5rem;  --sp-16: 4rem;
  --sp-20: 5rem;    --sp-24: 6rem;    --sp-32: 8rem;    --sp-40: 10rem;

  /* Vertical rhythm for full-bleed sections */
  --section-y:       clamp(4rem, 3rem + 5vw, 8.5rem);
  --section-y-tight: clamp(2.75rem, 2.2rem + 3vw, 5rem);
  --section-y-loose: clamp(5rem, 3.5rem + 7vw, 11rem);

  /* ---- Layout -------------------------------------------------------- */
  --container:       78.75rem; /* 1260px */
  --container-wide:  90rem;    /* 1440px */
  --container-text:  46rem;    /* 736px — max comfortable reading width */
  --gutter:          clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --header-h:        84px;
  --header-h-sm:     68px;

  /* ---- Radii --------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
  --r-xl: 32px; --r-2xl: 44px; --r-pill: 999px;

  /* ---- Elevation — soft, brand-tinted, never grey mush -------------- */
  --sh-xs: 0 1px 2px rgba(9, 60, 128, .06);
  --sh-sm: 0 2px 8px rgba(9, 60, 128, .07);
  --sh-md: 0 10px 28px -8px rgba(9, 60, 128, .16), 0 2px 6px rgba(9, 60, 128, .05);
  --sh-lg: 0 26px 60px -18px rgba(9, 60, 128, .24), 0 4px 12px rgba(9, 60, 128, .06);
  --sh-xl: 0 44px 96px -28px rgba(7, 47, 99, .32);
  --sh-lift: 0 32px 68px -22px rgba(0, 122, 61, .26);
  --ring: 0 0 0 3px rgba(0, 166, 82, .34);

  /* ---- Motion -------------------------------------------------------- */
  --ease-out:  cubic-bezier(.22, .78, .28, 1);
  --ease-in-out: cubic-bezier(.62, .05, .34, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .5, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 520ms;
  --t-reveal: 820ms;

  /* ---- Z-index scale -------------------------------------------------- */
  --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-header: 500;
  --z-drawer: 800; --z-modal: 900; --z-toast: 1000;
}

/* Reduced-motion: neutralise durations at the token level so every
   component inherits the preference without individual overrides. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-reveal: 1ms;
  }
}