/* ============================================================
   Group Supermarket — design tokens ONLY (Part 3, §6).
   No layout, no components. This file is loaded unchanged into
   the eventual WordPress child theme — do not add rules here.
   ============================================================ */

:root {
  /* --- Raw palette (Part 1, §2.2; Part 2, §7) --- */
  --lot:      #14351F;   /* deep leaf green — was midnight blue; client removed blue Aug 2026 */
  --sodium:   #F5A93C;   /* lamp amber — accent, CTAs, active states */
  --shelf:    #FAFAF7;   /* day ground — cool paper white */
  --ink:      #15171C;   /* body text on light */
  --open:     #1F9D57;   /* RESERVED: open/closed status only. Never decorative. */
  --concrete: #D8D6CF;   /* hairlines, dividers, disabled */
  --sale:     #C33B36;   /* RESERVED: reduced price only */
  --surface-day:   #FFFFFF;
  --surface-night: #1C4A2B;

  /* Client logo colours (supplied Aug 2026). Used ONLY in the brand mark —
     the page palette keeps Part 1's discipline: green = open status,
     red = sale price. The -bright pair keeps contrast on night ground. */
  --brand-green:        #2E9C46;
  --brand-red:          #C7362F;
  --brand-green-bright: #45BE63;
  --brand-red-bright:   #E2564D;
  /* Deep variant kept for hover/pressed states. The accent itself is the
     logo green per the client's "lighter green" call — note white text on
     it is AA for large/bold text only. */
  --brand-green-deep:   #1F7A33;
  /* Lightest green holding white text at 4.5:1 (raw logo green is only 3.5:1) */
  --brand-green-mid:    #1E8536;

  /* --- Type — the whole site set in the client logo's three faces:
         rounded heavy sans (Baloo 2) for display, geometric sans
         (Montserrat) for body/UI/data, connected script (Dancing Script)
         for taglines. --font-mono keeps its ROLE name (labels, prices,
         hours) but now resolves to Montserrat per the client's request. --- */
  --font-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
  --font-brand:   'Montserrat', 'Arial Black', sans-serif;
  --font-script:  'Dancing Script', 'Segoe Script', cursive;
  --font-body:    'Montserrat', system-ui, 'Segoe UI', sans-serif;
  --font-mono:    'Montserrat', system-ui, 'Segoe UI', sans-serif;

  --display-xl-size: clamp(2.75rem, 9vw, 6rem);
  --display-l-size:  clamp(2rem, 5.5vw, 3.5rem);
  --heading-size:    1.5rem;
  --body-size:       1.0625rem;
  --small-size:      0.875rem;
  --mono-label-size: 0.75rem;
  --mono-data-size:  1.125rem;

  /* --- Space: 4px base (Part 1, §2.4) --- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-24: 96px;
  --band-pad: var(--sp-24);           /* section rhythm: 96 desktop */
  --pad: var(--sp-6);                 /* component padding: 24 desktop */
  --gutter: 24px;
  --wrap-max: 1200px;

  --radius: 6px;
  /* Shelf-tag notch — the only non-rectangular form on the site.
     Tags and chips only; never cards, buttons, or images. */
  --notch: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);

  --header-h: 64px;
  --header-h-condensed: 52px;
}

@media (max-width: 719px) {
  :root {
    --band-pad: var(--sp-14);         /* 56 mobile */
    --pad: var(--sp-5);               /* 20 mobile */
    --gutter: 20px;
  }
}

/* --- Semantic layer — flips with the theme (Part 3, §6).
       Components reference ONLY these. --- */

[data-theme="day"] {
  --bg:         var(--shelf);
  --fg:         var(--ink);
  --fg-muted:   color-mix(in srgb, var(--ink) 62%, transparent);
  --rule:       var(--concrete);
  --surface:    var(--surface-day);
  /* Accent is the brand green (client direction, Aug 2026 — supersedes the
     Part 1 sodium accent). Amber survives only as --warn: closing-soon,
     low stock, and the lamp in the shopfront illustration. */
  --accent:     var(--brand-green-mid);
  --on-accent:  #FFFFFF;
  --warn:       var(--sodium);
  --feature-bg: var(--lot);
  --feature-fg: var(--shelf);
  --brand-1:    var(--brand-green);
  --brand-2:    var(--brand-red);
}

[data-theme="night"] {
  --bg:         var(--lot);
  --fg:         var(--shelf);
  --fg-muted:   color-mix(in srgb, var(--shelf) 70%, transparent);
  --rule:       color-mix(in srgb, var(--shelf) 18%, transparent);
  --surface:    var(--surface-night);
  --accent:     var(--brand-green-mid);
  --on-accent:  #FFFFFF;
  --warn:       var(--sodium);
  /* Night is already dark: the feature band lifts to surface instead of
     inverting — the one place theming isn't a straight swap. */
  --feature-bg: var(--surface-night);
  --feature-fg: var(--shelf);
  --brand-1:    var(--brand-green-bright);
  --brand-2:    var(--brand-red-bright);
}