/* ============================================================
   Markit Design System — token layer for the public web map.

   Scoped to the map page: map.html links this AFTER styles.css and
   BEFORE map.css, so on the map page these warm, earthy design-system
   tokens win the cascade while the landing/support/admin pages (which
   never link this file) keep styles.css untouched.

   Source of truth: design_handoff_web_map/tokens/{colors,typography,
   spacing}.css. Values are copied verbatim from the handoff. The trailing
   "bridge" block re-points the few legacy styles.css-only token names
   (--bg-*, --border-glass, --card-radius, --green-glow, --font-heading,
   --transition-*) at their design-system equivalents so the bulk of
   map.css adopts the system with no per-rule edits.
   ============================================================ */

:root {
  /* ---- Leaf / grow — primary brand green ---- */
  --green-50:  #edf5ef;
  --green-100: #d6e9dc;
  --green-200: #aed4ba;
  --green-300: #7fbc92;
  --green-400: #53a06e;
  --green-500: #2f7a4d;   /* primary action */
  --green-600: #246b41;
  --green-700: #1e5635;
  --green-800: #163f27;
  --green-900: #0e2a1a;

  /* ---- Sage — soft wordmark tone ---- */
  --sage-light: #c7ded5;
  --sage:       #a7cdbf;
  --sage-dark:  #6fa793;

  /* ---- Carrot / harvest — warm secondary accent ---- */
  --carrot-50:  #fbeee3;
  --carrot-100: #f6d9c0;
  --carrot-200: #efbc92;
  --carrot-300: #e89a5e;
  --carrot-400: #e07f38;
  --carrot-500: #d26a28;
  --carrot-600: #b5551d;
  --carrot-700: #8f4317;

  /* ---- Earth accents ---- */
  --clay:   #b5613c;
  --wheat:  #e0a95c;
  --soil:   #6b4e32;
  --mauve:      #9b7488;
  --mauve-dark: #7d5a6c;

  /* ---- Warm neutrals — paper to bark ---- */
  --paper:        #faf7f0;
  --paper-raised: #ffffff;
  --paper-sunken: #f2ece0;
  --bark-50:  #efe9dd;
  --bark-100: #e1d8c7;
  --bark-200: #c9bda7;
  --bark-300: #ab9c82;
  --bark-400: #897a62;
  --bark-500: #6b5d49;
  --bark-600: #524636;
  --bark-700: #3d342a;
  --bark-800: #2a241d;
  --bark-900: #1c1812;

  /* ---- Semantic status ---- */
  --status-success: #2f7a4d;
  --status-warning: #c8861f;
  --status-danger:  #b23a2e;
  --status-info:    #6fa793;

  /* ============ Semantic aliases (light) ============ */
  --surface-page:    var(--paper);
  --surface-raised:  var(--paper-raised);
  --surface-sunken:  var(--paper-sunken);
  --surface-hover:   #efe9dd;
  --surface-inverse: var(--bark-900);

  --text-primary:   var(--bark-900);
  --text-secondary: var(--bark-600);
  --text-muted:     var(--bark-400);
  --text-inverse:   var(--paper);
  --text-on-brand:  #ffffff;

  --border-hairline: #e7dfd1;
  --border-strong:   #d8cdba;
  --border-focus:    var(--green-400);

  --brand:        var(--green-500);
  --brand-hover:  var(--green-600);
  --brand-press:  var(--green-700);
  --brand-soft:   var(--green-100);
  --brand-on-soft:var(--green-700);

  --accent:       var(--carrot-500);
  --accent-hover: var(--carrot-600);
  --accent-soft:  var(--carrot-100);
  --accent-on-soft: var(--carrot-700);

  --focus-ring: rgba(47, 122, 77, 0.28);

  /* ---- Map pin status (glyph = category, fill = status) ---- */
  --pin-open:        var(--green-500);
  --pin-closed:      var(--mauve);
  --pin-unavailable: var(--carrot-500);
  --pin-unavailable-ink:  var(--carrot-600); /* text/chips on light */
  --pin-unavailable-soft: rgba(210, 106, 40, 0.12);

  /* ---- Type ---- */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, Menlo, Consolas, monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  --text-display: 3.5rem;
  --text-h1:      2.5rem;
  --text-h2:      1.875rem;
  --text-h3:      1.375rem;
  --text-h4:      1.125rem;
  --text-lead:    1.15rem;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-2xs:     0.6875rem;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.12em;

  /* ---- Spacing (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- Shadows — warm-tinted ---- */
  --shadow-xs: 0 1px 2px rgba(60, 46, 28, 0.06);
  --shadow-sm: 0 1px 3px rgba(60, 46, 28, 0.08), 0 1px 2px rgba(60, 46, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(60, 46, 28, 0.10);
  --shadow-lg: 0 12px 28px rgba(60, 46, 28, 0.12);
  --shadow-xl: 0 24px 48px rgba(60, 46, 28, 0.14);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    0.16s;
  --dur-med:     0.28s;
  --dur-slow:    0.5s;

  /* ============================================================
     Bridge — legacy styles.css token names → design-system values,
     so existing map.css rules adopt the system without edits.
     ============================================================ */
  --bg-primary:     var(--surface-page);
  --bg-secondary:   var(--surface-raised);
  --bg-card:        var(--surface-raised);
  --bg-card-hover:  var(--surface-hover);
  --bg-glass:       var(--surface-raised);   /* de-glass: solid raised surface */
  --border-glass:   var(--border-hairline);
  --card-radius:    var(--radius-lg);
  --green-glow:     var(--brand-soft);
  --font-heading:   var(--font-display);
  --transition-fast: var(--dur-fast) var(--ease-out);
  --transition-med:  var(--dur-med) var(--ease-out);
  --transition-slow: var(--dur-slow) var(--ease-out);
}

/* ============ Dark theme — "after dusk on the farm" ============
   The map page has no theme toggle, so OS preference is the only dark
   trigger. styles.css ships a prefers-color-scheme dark block at selector
   specificity (0,3,0) that redefines the green/carrot RAMPS and the legacy
   bridge tokens (--bg-x, --border-glass, --green-glow). To win, this mirror
   must (a) match that selector + load later, and (b) restate EVERY token styles.css
   touches in dark — the semantic aliases, the ramps, AND the bridge — as
   LITERALS, so nothing resolves back through a hijacked ramp var. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    /* Brightened warm ramps (so direct var(--green-N) usage reads on dark) */
    --green-400: #7fbc92;
    --green-500: #53a06e;
    --green-600: #2f7a4d;

    /* Semantic aliases */
    --surface-page:    #161310;
    --surface-raised:  #221d18;
    --surface-sunken:  #100d0a;
    --surface-hover:   #2c261f;
    --surface-inverse: #faf7f0;

    --text-primary:   #f4efe6;
    --text-secondary: #c9bda7;
    --text-muted:     #897a62;
    --text-inverse:   #1c1812;
    --text-on-brand:  #ffffff;

    --border-hairline: #322b23;
    --border-strong:   #463d31;
    --border-focus:    #7fbc92;

    --brand:        #53a06e;
    --brand-hover:  #7fbc92;
    --brand-press:  #aed4ba;
    --brand-soft:   #1a3326;
    --brand-on-soft:#aed4ba;

    --accent:       #e07f38;
    --accent-hover: #e89a5e;
    --accent-soft:  #3a2414;
    --accent-on-soft: #efbc92;

    --status-success: #53a06e;
    --status-warning: #e0a95c;
    --status-danger:  #e06a5c;
    --status-info:    #a7cdbf;

    --focus-ring: rgba(83, 160, 110, 0.35);

    --pin-open:        #53a06e;
    --pin-closed:      #b08aa0;
    --pin-unavailable: #e07f38;
    --pin-unavailable-ink:  #e89a5e;
    --pin-unavailable-soft: rgba(224, 127, 56, 0.18);

    /* Legacy bridge (restated so styles.css's dark block doesn't reclaim it) */
    --bg-primary:    #161310;
    --bg-secondary:  #221d18;
    --bg-card:       #221d18;
    --bg-card-hover: #2c261f;
    --bg-glass:      #221d18;
    --border-glass:  #322b23;
    --green-glow:    #1a3326;
  }
}

/* Explicit dark via a theme toggle (data-theme="dark") — e.g. index.html's
   footer toggle. styles.css ships a [data-theme="dark"] (0,1,0) cool-slate block;
   this mirror matches that specificity, loads later, and restates the warm-bark
   values as LITERALS so the toggle shows the design dark theme, not cool slate.
   (The @media block above covers OS-driven dark; this covers the explicit toggle.) */
[data-theme="dark"] {
  --green-400: #7fbc92;
  --green-500: #53a06e;
  --green-600: #2f7a4d;

  --surface-page:    #161310;
  --surface-raised:  #221d18;
  --surface-sunken:  #100d0a;
  --surface-hover:   #2c261f;
  --surface-inverse: #faf7f0;

  --text-primary:   #f4efe6;
  --text-secondary: #c9bda7;
  --text-muted:     #897a62;
  --text-inverse:   #1c1812;
  --text-on-brand:  #ffffff;

  --border-hairline: #322b23;
  --border-strong:   #463d31;
  --border-focus:    #7fbc92;

  --brand:        #53a06e;
  --brand-hover:  #7fbc92;
  --brand-press:  #aed4ba;
  --brand-soft:   #1a3326;
  --brand-on-soft:#aed4ba;

  --accent:       #e07f38;
  --accent-hover: #e89a5e;
  --accent-soft:  #3a2414;
  --accent-on-soft: #efbc92;

  --status-success: #53a06e;
  --status-warning: #e0a95c;
  --status-danger:  #e06a5c;
  --status-info:    #a7cdbf;

  --focus-ring: rgba(83, 160, 110, 0.35);

  --pin-open:        #53a06e;
  --pin-closed:      #b08aa0;
  --pin-unavailable: #e07f38;
  --pin-unavailable-ink:  #e89a5e;
  --pin-unavailable-soft: rgba(224, 127, 56, 0.18);

  --bg-primary:    #161310;
  --bg-secondary:  #221d18;
  --bg-card:       #221d18;
  --bg-card-hover: #2c261f;
  --bg-glass:      #221d18;
  --border-glass:  #322b23;
  --green-glow:    #1a3326;
}

/* Eyebrow / overline helper (from the design system's base.css) — used by the
   detail-panel section labels ("Inventory", "In stock now"). */
.markit-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}