/* ============================================================
   OliverDeck — TIER 2 · SEMANTIC TOKENS (roles)
   Every value resolves to a Tier-1 primitive. Components read
   these (and Tier-3 component vars), never raw palette steps.
   Light is the only page theme (no dark mode for the site),
   but dark *sections* (hero, footer, B2B, CTA) are first-class:
   wrap them in `.od-on-dark` and the same semantic tokens flip.
   ============================================================ */

:root {
  /* ---------- SURFACES / BACKGROUND ---------- */
  --od-color-bg:              var(--neutral-0);    /* page */
  --od-color-bg-subtle:       var(--neutral-50);   /* alt sections, "paper" */
  --od-color-bg-warm:         var(--neutral-100);
  --od-color-surface:         var(--neutral-0);     /* cards, panels */
  --od-color-surface-raised:  var(--neutral-0);     /* elevated (with shadow) */
  --od-color-surface-sunken:  var(--neutral-50);    /* wells, spec blocks */
  --od-color-ink:             var(--wood-900);      /* dark warm field */
  --od-color-surface-dark:    #42301d;              /* walnut — large dark feature panels (lighter than the espresso ink field) */

  /* ---------- TEXT ---------- */
  --od-color-text-primary:   var(--neutral-900);
  --od-color-text-secondary: var(--neutral-700);
  --od-color-text-muted:     var(--neutral-500);
  --od-color-text-faint:     var(--neutral-400);    /* hint / placeholder */
  --od-color-text-inverse:   var(--neutral-50);
  --od-color-text-brand:     var(--olive-700);      /* olive text on light, AA */
  --od-color-text-link:      var(--olive-700);
  --od-color-text-link-hover: var(--olive-600);

  /* ---------- BORDERS ---------- */
  --od-color-border:        var(--neutral-200);
  --od-color-border-strong: var(--neutral-300);
  --od-color-divider:       var(--neutral-100);

  /* ---------- BRAND / ACCENT ---------- */
  --od-color-brand:          var(--olive-400);   /* #EEC30D */
  --od-color-brand-hover:    var(--olive-500);
  --od-color-brand-active:   var(--olive-600);
  --od-color-brand-contrast: var(--wood-900);    /* near-black ink on yellow */
  --od-color-brand-subtle:   var(--olive-50);    /* tint surface */
  --od-color-accent-moss:    var(--moss-500);
  --od-color-accent-clay:    var(--clay-500);
  --od-color-accent-lagoon:  var(--lagoon-500);
  --od-color-accent-amber:   var(--amber-400);

  /* ---------- STATUS ---------- */
  --od-color-success:         #3c8f4a;
  --od-color-success-surface: #e4f1e1;
  --od-color-success-text:    #1f4a28;
  --od-color-warning:         #d88a1f;
  --od-color-warning-surface: #fbead0;
  --od-color-warning-text:    #6b4310;
  --od-color-danger:          #b4341f;
  --od-color-danger-surface:  #f7dcd5;
  --od-color-danger-text:     #5b1a0f;
  --od-color-info:            #3d6a8a;
  --od-color-info-surface:    #dfeaf3;
  --od-color-info-text:       #1d3547;

  /* ---------- INTERACTIVE STATE ---------- */
  --od-color-hover-tint:   rgba(24, 16, 9, 0.04);   /* warm wash on hover */
  --od-color-active-tint:  rgba(24, 16, 9, 0.08);
  --od-state-disabled-opacity: 0.5; /* @kind other */
  --od-focus-ring:  var(--shadow-glow);             /* 4px olive halo */
  --od-focus-color: var(--olive-400);

  /* ============================================================
     LEGACY ALIASES — keep the original prototype names working.
     New code should prefer the --od-color-* names above.
     ============================================================ */
  --color-primary:       var(--od-color-brand);
  --color-primary-hover: var(--od-color-brand-hover);
  --color-primary-fg:    var(--od-color-brand-contrast);
  --color-ink:           var(--od-color-ink);
  --color-surface:       var(--od-color-surface);
  --color-surface-alt:   var(--od-color-bg-subtle);
  --color-surface-warm:  var(--od-color-bg-warm);
  --color-surface-dark:  var(--od-color-surface-dark);
  --color-surface-moss:  var(--moss-700);
  --color-fg-1: var(--od-color-text-primary);
  --color-fg-2: var(--od-color-text-secondary);
  --color-fg-3: var(--od-color-text-muted);
  --color-fg-4: var(--od-color-text-faint);
  --color-fg-on-dark:       var(--neutral-50);
  --color-fg-muted-on-dark: var(--neutral-300);
  --color-border:        var(--od-color-border);
  --color-border-strong: var(--od-color-border-strong);
  --color-border-dark:   rgba(255, 255, 255, 0.12);

  --success: var(--od-color-success); --success-bg: var(--od-color-success-surface); --success-fg: var(--od-color-success-text);
  --warning: var(--od-color-warning); --warning-bg: var(--od-color-warning-surface); --warning-fg: var(--od-color-warning-text);
  --danger:  var(--od-color-danger);  --danger-bg:  var(--od-color-danger-surface);  --danger-fg:  var(--od-color-danger-text);
  --info:    var(--od-color-info);    --info-bg:    var(--od-color-info-surface);    --info-fg:    var(--od-color-info-text);

  /* Product badges */
  --badge-hit:     var(--olive-500); --badge-hit-fg:  var(--wood-900);
  --badge-new:     var(--moss-500);  --badge-new-fg:  #ffffff;
  --badge-sale:    var(--danger);    --badge-sale-fg: #ffffff;
  --badge-stock:   var(--success);   --badge-stock-fg:#ffffff;
}

/* ============================================================
   DARK SECTIONS — systematic, token-driven.
   Add class .od-on-dark (or [data-surface="dark"]) to any block
   that sits on the wood-900 field. Both --od-* and legacy names
   flip, so components adapt with no per-component overrides.
   ============================================================ */
.od-on-dark,
[data-surface="dark"] {
  --od-color-bg:             var(--wood-900);
  --od-color-bg-subtle:      var(--wood-800);
  --od-color-bg-warm:        var(--wood-800);
  --od-color-surface:        rgba(255, 255, 255, 0.04);
  --od-color-surface-raised: rgba(255, 255, 255, 0.06);
  --od-color-surface-sunken: rgba(0, 0, 0, 0.25);
  --od-color-text-primary:   var(--neutral-50);
  --od-color-text-secondary: var(--neutral-300);
  --od-color-text-muted:     var(--neutral-400);
  --od-color-text-faint:     var(--neutral-500);
  --od-color-text-brand:     var(--olive-300);
  --od-color-text-link:      var(--olive-300);
  --od-color-text-link-hover: var(--olive-200);
  --od-color-border:         rgba(255, 255, 255, 0.12);
  --od-color-border-strong:  rgba(255, 255, 255, 0.20);
  --od-color-divider:        rgba(255, 255, 255, 0.08);
  --od-color-brand-subtle:   rgba(238, 195, 13, 0.12);
  --od-color-hover-tint:     rgba(255, 255, 255, 0.06);
  --od-color-active-tint:    rgba(255, 255, 255, 0.10);

  /* legacy mirror */
  --color-surface:       var(--od-color-surface);
  --color-surface-alt:   var(--od-color-bg-subtle);
  --color-fg-1: var(--od-color-text-primary);
  --color-fg-2: var(--od-color-text-secondary);
  --color-fg-3: var(--od-color-text-muted);
  --color-fg-4: var(--od-color-text-faint);
  --color-border:        var(--od-color-border);
  --color-border-strong: var(--od-color-border-strong);

  color: var(--od-color-text-primary);
}