/* =====================================================================
   Sales Blitz v3 — shared design tokens
   One system, two modes. Light is cream editorial. Dark is Tuscan-villa
   olive-ink with espresso as accent, sage reserved for agent/active.
   ===================================================================== */

:root {
  /* ----- Palette primitives (always defined) ----- */
  --cream:            #F5EEE1;
  --cream-deep:       #EDE4D2;
  --bone:             #E5D9BF;
  --paper:            #FBF6EB;
  --stone:            #CEBFA2;

  --terracotta:       #C75A3A;
  --terracotta-soft:  #D97757;
  --coral:            #D76F5E;
  --amber:            #E8A04F;
  --amber-deep:       #C97B2F;
  --amber-glow:       #F1B866;
  --rose:             #B85C66;

  --sage:             #6B8E5A;
  --sage-deep:        #4F6F42;
  --sage-glow:        #8FAE7F;
  --sage-ink:         #2A3524;
  --emerald:          #2F5D3A;
  --emerald-ink:      #1E3A26;
  --olive-ink:        #1A1E15;
  --olive-ink-raise:  #20251A;
  --olive-ink-lift:   #272D21;
  --mint-paper:       #D8E4CC;

  --sky:              #A6C5C9;
  --lagoon:           #4E7A80;

  --espresso:         #1C1814;
  --espresso-deep:    #0F0D0A;
  --espresso-soft:    #2A221A;
  --espresso-mid:     #3A2F24;

  --cream-text:       #F2E8D6;
  --cream-text-mid:   #D4C6AC;
  --cream-text-quiet: #97886E;
  --cream-text-whisper: #6B5E48;

  /* ----- Type system ----- */
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sans:    'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SF Mono, Menlo, monospace;

  /* ----- Radii ----- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-xxl: 28px;

  /* ----- Measures ----- */
  --shell:   1240px;
  --shell-wide: 1440px;

  /* ----- Motion ----- */
  --ease-smooth:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snappy:  cubic-bezier(0.4, 0, 0.1, 1);
  --ease-paper:   cubic-bezier(0.6, 0, 0.15, 1);
  --dur-fast:   180ms;
  --dur-med:    320ms;
  --dur-slow:   560ms;
}

/* =====================================================================
   LIGHT MODE (default)
   Cream paper editorial. Italian summer morning.
   ===================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg-canvas:        var(--cream);
  --bg-base:          var(--cream);
  --bg-paper:         var(--paper);
  --bg-panel:         var(--cream-deep);
  --bg-raised:        #F8F1E3;
  --bg-sunk:          var(--bone);

  --ink:              #1C1814;
  --ink-soft:         #2A221A;
  --ink-mid:          #3A2F24;
  --ink-quiet:        #5A4B3D;
  --ink-whisper:      #8A7963;
  --ink-tint:         rgba(28, 24, 20, 0.08);
  --ink-line:         rgba(28, 24, 20, 0.12);
  --ink-line-strong:  rgba(28, 24, 20, 0.18);

  --accent:           var(--terracotta);
  --accent-soft:      var(--terracotta-soft);
  --accent-warm:      var(--amber);
  --accent-warm-deep: var(--amber-deep);
  --accent-sage:      var(--sage-deep);
  --accent-sage-soft: var(--sage);
  --accent-cool:      var(--lagoon);

  --cta-bg:           var(--emerald);
  --cta-text:         var(--cream);
  --cta-hover:        var(--sage-deep);

  --shadow-soft:      0 1px 0 rgba(28, 24, 20, 0.04), 0 8px 24px -12px rgba(28, 24, 20, 0.14);
  --shadow-lift:      0 2px 0 rgba(28, 24, 20, 0.05), 0 30px 60px -24px rgba(28, 24, 20, 0.28);
  --shadow-postcard:  0 1px 0 rgba(28, 24, 20, 0.06), 0 20px 48px -20px rgba(28, 24, 20, 0.22), 0 0 0 1px rgba(28, 24, 20, 0.06);
  --shadow-inset:     inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(28, 24, 20, 0.04);

  --grain-opacity:    0.35;
  --grain-blend:      multiply;
  --grain-fill:       0.25;
  --grain-r:          0.11;
  --grain-g:          0.09;
  --grain-b:          0.08;

  --nav-bg:           rgba(245, 238, 225, 0.72);
  --nav-border:       var(--ink-line);
  --nav-text:         var(--ink);

  --vignette-bottom:  rgba(201, 123, 47, 0.08);
  --vignette-top:     rgba(199, 90, 58, 0.06);
}

/* =====================================================================
   DARK MODE
   Tuscan villa at dusk. Olive-ink base, espresso frames, sage active.
   ===================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas:        var(--espresso-deep);
  --bg-base:          var(--olive-ink);
  --bg-paper:         var(--cream);               /* paper insets stay cream */
  --bg-panel:         var(--olive-ink-raise);
  --bg-raised:        var(--olive-ink-lift);
  --bg-sunk:          #14170F;

  --ink:              var(--cream-text);
  --ink-soft:         var(--cream-text-mid);
  --ink-mid:          var(--cream-text-mid);
  --ink-quiet:        var(--cream-text-quiet);
  --ink-whisper:      var(--cream-text-whisper);
  --ink-tint:         rgba(245, 238, 225, 0.05);
  --ink-line:         rgba(143, 174, 127, 0.10);  /* sage-tinted divider */
  --ink-line-strong:  rgba(143, 174, 127, 0.20);

  --accent:           var(--terracotta-soft);
  --accent-soft:      var(--coral);
  --accent-warm:      var(--amber-glow);
  --accent-warm-deep: var(--amber);
  --accent-sage:      var(--sage-glow);
  --accent-sage-soft: var(--sage);
  --accent-cool:      var(--sky);

  --cta-bg:           var(--amber);               /* amber pops on olive-ink */
  --cta-text:         var(--espresso);
  --cta-hover:        var(--amber-glow);

  --shadow-soft:      0 1px 0 rgba(245, 238, 225, 0.03) inset, 0 10px 30px -14px rgba(0, 0, 0, 0.55);
  --shadow-lift:      0 1px 0 rgba(245, 238, 225, 0.04) inset, 0 30px 60px -28px rgba(0, 0, 0, 0.7);
  --shadow-postcard:  0 1px 0 rgba(245, 238, 225, 0.05) inset, 0 20px 48px -20px rgba(0, 0, 0, 0.65);
  --shadow-inset:     inset 0 1px 0 rgba(245, 238, 225, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.3);

  --grain-opacity:    0.22;
  --grain-blend:      overlay;
  --grain-fill:       0.4;
  --grain-r:          0.95;
  --grain-g:          0.88;
  --grain-b:          0.75;

  --nav-bg:           rgba(26, 30, 21, 0.82);
  --nav-border:       var(--ink-line);
  --nav-text:         var(--ink);

  --vignette-bottom:  rgba(232, 160, 79, 0.08);
  --vignette-top:     rgba(107, 142, 90, 0.07);
}

/* =====================================================================
   Respect system preference on first visit, overridden by explicit toggle
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg-canvas:        var(--espresso-deep);
    --bg-base:          var(--olive-ink);
    --bg-paper:         var(--cream);
    --bg-panel:         var(--olive-ink-raise);
    --bg-raised:        var(--olive-ink-lift);
    --bg-sunk:          #14170F;

    --ink:              var(--cream-text);
    --ink-soft:         var(--cream-text-mid);
    --ink-mid:          var(--cream-text-mid);
    --ink-quiet:        var(--cream-text-quiet);
    --ink-whisper:      var(--cream-text-whisper);
    --ink-tint:         rgba(245, 238, 225, 0.05);
    --ink-line:         rgba(143, 174, 127, 0.10);
    --ink-line-strong:  rgba(143, 174, 127, 0.20);

    --accent:           var(--terracotta-soft);
    --accent-soft:      var(--coral);
    --accent-warm:      var(--amber-glow);
    --accent-warm-deep: var(--amber);
    --accent-sage:      var(--sage-glow);
    --accent-sage-soft: var(--sage);
    --accent-cool:      var(--sky);

    --cta-bg:           var(--amber);
    --cta-text:         var(--espresso);
    --cta-hover:        var(--amber-glow);

    --shadow-soft:      0 1px 0 rgba(245, 238, 225, 0.03) inset, 0 10px 30px -14px rgba(0, 0, 0, 0.55);
    --shadow-lift:      0 1px 0 rgba(245, 238, 225, 0.04) inset, 0 30px 60px -28px rgba(0, 0, 0, 0.7);
    --shadow-postcard:  0 1px 0 rgba(245, 238, 225, 0.05) inset, 0 20px 48px -20px rgba(0, 0, 0, 0.65);
    --shadow-inset:     inset 0 1px 0 rgba(245, 238, 225, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.3);

    --grain-opacity:    0.22;
    --grain-blend:      overlay;
    --grain-fill:       0.4;
    --grain-r:          0.95;
    --grain-g:          0.88;
    --grain-b:          0.75;

    --nav-bg:           rgba(26, 30, 21, 0.82);
    --nav-border:       var(--ink-line);
    --nav-text:         var(--ink);

    --vignette-bottom:  rgba(232, 160, 79, 0.08);
    --vignette-top:     rgba(107, 142, 90, 0.07);
  }
}