/* ===========================================================================
   Design tokens — single source of truth for the shop's visual system.
   Loaded BEFORE every other stylesheet via head-assets.html.
   Page-level CSS should consume these tokens rather than hardcoding values.
   =========================================================================== */

:root {
  /* ---------- Color: brand ---------- */
  --color-brand-600:   #478f07;   /* primary green (logo) */
  --color-brand-700:   #3c7a06;   /* hover */
  --color-brand-800:   #2f5f04;   /* pressed */
  --color-brand-100:   #e8f3d8;   /* tint (chips, soft fills) */
  --color-brand-50:    #f3f8eb;   /* lightest tint (table rows etc.) */

  --color-accent-700:  #620063;   /* deep purple — use SPARINGLY (tags, micro-accents) */
  --color-accent-100:  #f4e6f4;

  /* ---------- Color: neutrals (warm) ---------- */
  --color-bg:          #fafaf7;   /* page background — warm off-white */
  --color-surface:     #ffffff;   /* cards, modals */
  --color-surface-2:   #f5f4ef;   /* alt surface (zebra rows, banners) */
  --color-border:      #e7e5dc;   /* hairline borders */
  --color-border-strong:#d4d1c4;

  --color-ink:         #1c1d1a;   /* primary text — near-black warm */
  --color-ink-muted:   #5a5b56;   /* secondary text */
  --color-ink-soft:    #8a8b85;   /* tertiary / placeholder */
  --color-on-brand:    #ffffff;   /* text on brand fills */

  /* ---------- Color: status ---------- */
  --color-success:     #16a34a;
  --color-success-bg:  #ecfdf3;
  --color-warning:     #d97706;
  --color-warning-bg:  #fff7ed;
  --color-danger:      #dc2626;
  --color-danger-bg:   #fef2f2;
  --color-info:        #0369a1;
  --color-info-bg:     #eff6ff;

  /* ---------- Typography ---------- */
  --font-display: "Winky Rough", "Fraunces", Georgia, serif;     /* brand voice — headings, hero */
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — clamp() = responsive without media queries */
  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-md:   1.125rem;    /* 18 */
  --text-lg:   1.25rem;     /* 20 */
  --text-xl:   1.5rem;      /* 24 */
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); /* 28-36 */
  --text-3xl:  clamp(2rem,   1.6rem + 2vw,   2.75rem);   /* 32-44 */
  --text-4xl:  clamp(2.5rem, 2rem   + 2.5vw, 3.75rem);   /* 40-60 */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;

  /* ---------- Spacing (4px scale) ---------- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* Section vertical rhythm */
  --section-y: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows (modern, multi-layer) ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 22, 18, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 22, 18, 0.05), 0 1px 3px rgba(20, 22, 18, 0.06);
  --shadow-md: 0 4px 6px -2px rgba(20, 22, 18, 0.06), 0 2px 4px -2px rgba(20, 22, 18, 0.04);
  --shadow-lg: 0 12px 20px -8px rgba(20, 22, 18, 0.12), 0 4px 8px -4px rgba(20, 22, 18, 0.05);
  --shadow-xl: 0 24px 40px -12px rgba(20, 22, 18, 0.18), 0 8px 16px -8px rgba(20, 22, 18, 0.08);
  --shadow-ring: 0 0 0 3px rgba(71, 143, 7, 0.18);   /* focus ring (brand) */

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;

  /* ---------- Layout ---------- */
  --container-max:    1240px;
  --container-pad:    clamp(1rem, 0.6rem + 1.5vw, 2rem);
  --header-h:         110px;   /* tall enough for a 2x-size logo with breathing room */
  --nav-h:            48px;
  --header-total-h:   calc(var(--header-h) + var(--nav-h));   /* total fixed-header height */

  /* Z-index scale */
  --z-base:     1;
  --z-sticky:   100;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
}

/* ---------- Accessibility: honor reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Backwards-compat aliases for older page CSS ---------- */
/* These let existing pages keep working while we migrate them.   */
:root {
  --primary:        var(--color-brand-600);
  --primary-color:  var(--color-brand-600);
  --primary-hover:  var(--color-brand-700);
  --secondary:      var(--color-accent-700);
  --secondary-color:var(--color-accent-700);
  --accent:         var(--color-brand-600);
  --dark:           var(--color-ink);
  --light:          var(--color-bg);
  --white:          var(--color-surface);
  --success:        var(--color-success);
  --error-color:    var(--color-danger);
  --success-color:  var(--color-success);
  --text-color:     var(--color-ink);
  --text-light:     var(--color-ink-muted);
  --text-lighter:   var(--color-ink-soft);
  --light-bg:       var(--color-bg);
  --lighter-bg:     var(--color-surface-2);
  --border-color:   var(--color-border);
  --border-radius:  var(--radius-md);
  --border-radius-small: var(--radius-sm);
  --transition-fast:    var(--dur-fast) var(--ease-out);
  --transition-medium:  var(--dur-base) var(--ease-out);
  --transition-slow:    var(--dur-slow) var(--ease-out);
  --font-main:      var(--font-body);
}