/* ============================================================
   FainGrain — Lentil Color Theme System
   Each lentil variety has its own palette.
   CSS @property registers vars as <color> so the browser
   interpolates them smoothly when data-theme changes.
   ============================================================ */

/* --- Register animatable custom properties --- */
@property --bg-top    { syntax: '<color>'; inherits: true; initial-value: #ebf1e5; }
@property --bg-bottom { syntax: '<color>'; inherits: true; initial-value: #aebc9a; }
@property --bg-mid    { syntax: '<color>'; inherits: true; initial-value: #d6e0cb; }
@property --accent    { syntax: '<color>'; inherits: true; initial-value: #6d8c45; }
@property --green     { syntax: '<color>'; inherits: true; initial-value: #4f6b3f; }
@property --text      { syntax: '<color>'; inherits: true; initial-value: #1f2a1b; }
@property --text-soft { syntax: '<color>'; inherits: true; initial-value: #55644f; }
@property --orb-one   { syntax: '<color>'; inherits: true; initial-value: rgba(181,206,141,0.25); }
@property --orb-two   { syntax: '<color>'; inherits: true; initial-value: rgba(111,143,92,0.22); }
@property --line      { syntax: '<color>'; inherits: true; initial-value: rgba(55,80,48,0.12); }
@property --surface   { syntax: '<color>'; inherits: true; initial-value: rgba(247,251,244,0.70); }
@property --surface-strong { syntax: '<color>'; inherits: true; initial-value: rgba(250,253,248,0.88); }

/* --- Transition all registered properties --- */
:root {
    transition:
        --bg-top      1.2s ease,
        --bg-bottom   1.2s ease,
        --bg-mid      1.2s ease,
        --accent      1.0s ease,
        --green       1.0s ease,
        --text        0.8s ease,
        --text-soft   0.8s ease,
        --orb-one     1.4s ease,
        --orb-two     1.4s ease,
        --line        0.8s ease,
        --surface     1.0s ease,
        --surface-strong 1.0s ease;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    :root { transition: none; }
}

/* On mobile: snap transitions fast so they complete before the next scroll
   gesture fires another theme change — prevents colour strobing.           */
@media (max-width: 1024px) {
    :root {
        transition:
            --bg-top         0.35s ease,
            --bg-bottom      0.35s ease,
            --bg-mid         0.35s ease,
            --accent         0.3s ease,
            --green          0.3s ease,
            --text           0.25s ease,
            --text-soft      0.25s ease,
            --orb-one        0.4s ease,
            --orb-two        0.4s ease,
            --line           0.25s ease,
            --surface        0.3s ease,
            --surface-strong 0.3s ease;
    }

    /* Kill gentlePan on touch devices — it's GPU-heavy and invisible
       behind scroll momentum anyway.                                  */
    .hero-frame-photo,
    .about-hero-photo,
    .about-stage-photo,
    .about-stage-photo-next,
    .product-stage-photo,
    .product-stage-photo-next,
    .prod-stage-photo,
    .mkt-stage-photo,
    .pdp-hero-photo,
    .mkp-hero-photo {
        animation: none;
    }
}

/* ============================================================
   THEME PALETTES
   Backgrounds are pale washed tints — the lentil color reads
   clearly but subtly. Only accents hit the true lentil hue.
   ============================================================ */

/* --- Default / Brand (Hero, Markets, Contact) --- */
:root,
[data-theme="default"] {
    --bg-top:          #ebf1e5;
    --bg-bottom:       #aebc9a;
    --bg-mid:          #d6e0cb;
    --accent:          #6d8c45;
    --green:           #4f6b3f;
    --text:            #1f2a1b;
    --text-soft:       #55644f;
    --orb-one:         rgba(181, 206, 141, 0.18);
    --orb-two:         rgba(111, 143,  92, 0.15);
    --line:            rgba( 55,  80,  48, 0.10);
    --surface:         rgba(247, 251, 244, 0.70);
    --surface-strong:  rgba(250, 253, 248, 0.88);
}

/* --- Red Lentils
     Background: very pale blush-peach. Accent: dusty coral-red.
     Reads clearly as warm/orange without being harsh.              --- */
[data-theme="red-lentil"] {
    --bg-top:          #fdf2ec;
    --bg-bottom:       #e8c4a8;
    --bg-mid:          #f5dece;
    --accent:          #bf5530;
    --green:           #8c3820;
    --text:            #2a1208;
    --text-soft:       #7a4830;
    --orb-one:         rgba(220, 160, 120, 0.20);
    --orb-two:         rgba(185,  95,  55, 0.15);
    --line:            rgba(110,  50,  25, 0.10);
    --surface:         rgba(254, 249, 245, 0.72);
    --surface-strong:  rgba(255, 252, 249, 0.90);
}

/* --- Green Lentils
     Background: pale khaki-linen. Accent: muted olive-green.
     Clearly different from default without being too similar.      --- */
[data-theme="green-lentil"] {
    --bg-top:          #f0f0e4;
    --bg-bottom:       #c0c898;
    --bg-mid:          #d8dcbe;
    --accent:          #5c6c30;
    --green:           #404c20;
    --text:            #1c2010;
    --text-soft:       #585e38;
    --orb-one:         rgba(160, 175, 105, 0.20);
    --orb-two:         rgba(100, 118,  55, 0.15);
    --line:            rgba( 55,  68,  25, 0.10);
    --surface:         rgba(247, 248, 238, 0.72);
    --surface-strong:  rgba(251, 252, 244, 0.90);
}

/* --- Brown Lentils
     Background: pale warm cream. Accent: hazelnut brown.
     Warm and earthy without being heavy.                           --- */
[data-theme="brown-lentil"] {
    --bg-top:          #f8f0e4;
    --bg-bottom:       #d0aa80;
    --bg-mid:          #e4cca8;
    --accent:          #8a5828;
    --green:           #603c18;
    --text:            #261608;
    --text-soft:       #7a5838;
    --orb-one:         rgba(210, 170, 115, 0.20);
    --orb-two:         rgba(160, 110,  60, 0.15);
    --line:            rgba( 95,  58,  20, 0.10);
    --surface:         rgba(253, 248, 240, 0.72);
    --surface-strong:  rgba(255, 251, 245, 0.90);
}

/* --- Black Beluga Lentils
     Background: cool silver-grey (not black — needs to stay readable).
     Accent: deep charcoal. Page goes noticeably darker/cooler.     --- */
[data-theme="beluga"] {
    --bg-top:          #e8e8ec;
    --bg-bottom:       #9898a8;
    --bg-mid:          #c4c4cc;
    --accent:          #38383e;
    --green:           #202028;
    --text:            #101018;
    --text-soft:       #505060;
    --orb-one:         rgba(120, 120, 140, 0.20);
    --orb-two:         rgba( 55,  55,  75, 0.15);
    --line:            rgba( 25,  25,  40, 0.12);
    --surface:         rgba(244, 244, 248, 0.72);
    --surface-strong:  rgba(250, 250, 253, 0.90);
}

/* --- Yellow Split Lentils
     Background: pale warm cream-yellow. Accent: honey-gold.
     Clearly reads as yellow without burning the eyes.              --- */
[data-theme="yellow-split"] {
    --bg-top:          #fdfbe8;
    --bg-bottom:       #e8d070;
    --bg-mid:          #f5e8a0;
    --accent:          #a08010;
    --green:           #786008;
    --text:            #221c04;
    --text-soft:       #7a6825;
    --orb-one:         rgba(230, 205,  80, 0.22);
    --orb-two:         rgba(185, 155,  20, 0.16);
    --line:            rgba(115,  88,   5, 0.10);
    --surface:         rgba(255, 253, 238, 0.72);
    --surface-strong:  rgba(255, 254, 244, 0.90);
}

/* --- French Green (Puy) Lentils
     Background: pale sage-grey. Accent: deep slate-green.
     Speckled / deeper than regular green lentils.                  --- */
[data-theme="french-green"] {
    --bg-top:          #e8ede0;
    --bg-bottom:       #a0b088;
    --bg-mid:          #c8d4b0;
    --accent:          #4a5c30;
    --green:           #324020;
    --text:            #181e10;
    --text-soft:       #4e5838;
    --orb-one:         rgba(140, 165, 105, 0.20);
    --orb-two:         rgba( 80, 105,  55, 0.15);
    --line:            rgba( 45,  62,  25, 0.10);
    --surface:         rgba(242, 246, 236, 0.72);
    --surface-strong:  rgba(247, 251, 241, 0.90);
}

/* ============================================================
   ANIMATED BODY BACKGROUND
   Uses the transitioning CSS vars to repaint the gradient
   ============================================================ */
body {
    background:
        radial-gradient(circle at 12% 10%, var(--orb-one), transparent 24%),
        radial-gradient(circle at 88% 18%, var(--orb-two), transparent 24%),
        linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 42%, var(--bg-bottom) 100%);
}

/* Orbs pick up the transitioning vars automatically */
.orb-one { background: var(--orb-one); }
.orb-two { background: var(--orb-two); }

/* Brand logo transitions gently with theme */
.brand-logo {
    transition: opacity 0.4s ease;
}

/* Topbar glass picks up surface var */
.topbar-inner {
    background: var(--surface-strong);
    border-color: var(--line);
}

/* Theme indicator dot in nav (optional, shows active lentil color) */
.theme-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    transition: background 1.0s ease;
}

/* ============================================================
   SCROLL PROGRESS BAR (optional — shows lentil accent color)
   ============================================================ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--accent);
    z-index: 100;
    transition: width 0.1s linear, background 1.0s ease;
}