/* Brastos Sodas — design tokens · v3 · generated from docs/design/01-foundations.md §11 — edit there first */
:root {
  /* ============ 1 · COLOUR — tokens-colour-v3-warm.css, verbatim ============ */

  /* ---- brand constants (brandbook, unchanged) ---- */
  --cream:        #FCFDF5;  /* brandbook cream — label on --forest, --chip-active and the dark band; NOT the page */
  --fresh:        #8FC967;  /* brandbook leaf — logo leaf, dark-band text, the --added fill. Never text on light */
  --butter:       #FCE472;  /* brandbook yellow — dark-band text, focus ring there. Never a fill under text */
  --tomato:       #E2582E;  /* brandbook tomato — LARGE text / icon / rule only (3.4:1 on --ground) */

  /* ---- grounds (the tint is the point) ---- */
  --ground:       #FCF7D4;  /* page — cream mixed 25 % toward yellow. The candidate under test */
  --ground-2:     #FCFAE6;  /* page, lighter — cream 25 % toward the 50 % yellow tint. Board: ?ground=light */
  --chrome:       #F1EAD0;  /* oat — header, footer rail, sections, cards-on-tint. One step darker than the page */
  --photo-ground: #F6EFDC;  /* linen — under EVERY product photograph, so the shelf reads as one counter */
  --ground-alt:   #F1EAD0;  /* = --chrome (kept for the shared token contract) */
  --ground-nest:  #FCFAE6;  /* nested surface, hover row — one step lighter than the page */
  --surface:      #FFFFFF;  /* form field fill, drawer, modal — the only pure white */
  --card:         #F1EAD0;  /* card fill when a card sits on the page tint (= chrome) */
  --card-edge:    #F1EAD0;  /* = fill: no edge, no shadow. Photo ground does the separating */

  /* ---- ink ramp (olive-black, brandbook) ---- */
  --ink:          #191B11;  /* body, names, prices, headings — the brandbook ink, already olive */
  --ink-soft:     #484A3C;  /* secondary text, unit price, producer line */
  --ink-muted:    #666859;  /* tertiary: placeholder, struck was-price, disabled day cell (4.7:1 on chrome) */
  --heading:      #191B11;  /* headings are ink. Green is not a heading colour */

  /* ---- action (forest / ink family; cream label) ---- */
  --forest:       #2E4A21;  /* primary button fill, filled price, nav current */
  --forest-deep:  #22381A;  /* primary hover / pressed */
  --link:         #476B27;  /* text links, "Visos →", success text — the brightest olive that passes on chrome (5.1:1) */
  --link-hover:   #2E4A21;
  --focus:        #2E4A21;  /* focus ring on light */
  --focus-on-dark:#FCE472;  /* focus ring on the dark band */
  --added:        #8FC967;  /* THE green fill: selected day cell, "Įdėta į krepšelį" (transient) */
  --added-ink:    #191B11;  /* 8.9:1 — the only ink allowed on green */

  /* ---- chips ---- */
  --chip:         #F1EAD0;  /* inactive category / filter chip (= chrome), ink label */
  --chip-active:  #191B11;  /* filled active chip — ink, not green (F2P device) */
  --on-chip-active:#FCFDF5; /* cream label on the active chip (14.4:1) */

  /* ---- second warm accent family — one per view ---- */
  --tomato-ink:   #AD3A16;  /* small sale price, price-change text, "-15 %" tag ink (≥ 5.1:1 on every light ground) */
  --sale:         #AD3A16;  /* = --tomato-ink (shared contract name): filled sale badge, error text */
  --sale-tint:    #F8DFBB;  /* quiet sale tag ground — tomato at 15 % over the page */
  --on-sale:      #FCFDF5;  /* cream label on a filled --sale badge (7.4:1) */
  --honey-ink:    #7A5300;  /* "Šiandien" / "Sezonas" / "Liko 3 vnt." text */
  --honey-tint:   #FEF2B8;  /* THE yellow chip role — today / season. Yellow at 50 % over white */

  /* ---- semantic (aliases into the two families above) ---- */
  --success-ink:  #476B27;  /* = --link — stock "Yra", "Ekologiška" */
  --success-tint: #E1F0D2;  /* green at 25 % over cream — the tag ground only, never a band in this direction */
  --warn-ink:     #7A5300;  /* = --honey-ink */
  --warn-tint:    #FEF2B8;  /* = --honey-tint */

  /* ---- lines ---- */
  --line:         #E6DFC2;  /* hairline: dividers, price-row rule, day-strip cell edge (decorative) */
  --line-strong:  #7F7A66;  /* control border, outlined day cell (≥ 3.5:1 on every light ground) */

  /* ---- category tints (produce-derived UI colours; each ≥ 6:1 with its ink) ---- */
  --cat-darzoves-tint:   #DCE8CC;  /* leaf */
  --cat-darzoves-ink:    #365522;
  --cat-vaisiai-tint:    #F2D9DD;  /* raspberry */
  --cat-vaisiai-ink:     #7A2B44;
  --cat-mesa-tint:       #F2D8CD;  /* terracotta */
  --cat-mesa-ink:        #883622;
  --cat-pieno-tint:      #E9ECEA;  /* whey */
  --cat-pieno-ink:       #3B4E4F;
  --cat-bakaleja-tint:   #F0E2C4;  /* rye */
  --cat-bakaleja-ink:    #6A4E1A;
  --cat-gerimai-tint:    #D8E6DF;  /* bottle green */
  --cat-gerimai-ink:     #26564A;
  --cat-rinkiniai-tint:  #F8EDBE;  /* straw — yellow ≈ 35 %; sits 1.03:1 from the page, so tiles need the photo */
  --cat-rinkiniai-ink:   #5D4E12;

  /* ---- the one dark band (footer + at most one story band) ---- */
  --footer:           #191B11;  /* brandbook ink as the band. Green and yellow speak here as text */
  --band-dark:        #191B11;  /* alias for a mid-page story band — same colour, so it is still ONE band */
  --band-card:        #27291F;  /* a card on the dark band = ink lifted one step (1.18:1 vs the band) */
  --on-footer:        #FCFDF5;  /* 17.0:1 */
  --on-footer-muted:  #B9BDA9;  /* 9.0:1 */
  --footer-line:      #33362A;  /* hairline on the band */
  --pattern-color:    #2C371F;  /* pattern stroke = --fresh at 16 % over --footer, pre-blended (1.25:1) */

  /* ---- D-02 aliases: the lighter mix is the page, the 25 % step is the one tint band ---- */
  --page:         var(--ground-2);
  --band-tint:    var(--ground);
  --scrim:        rgb(25 27 17 / .45);   /* --ink at 45 % — the only alpha in the system */

  /* ============ 2 · TYPOGRAPHY (ADR-001 pair B) ============ */
  --ff-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", Arial, sans-serif;
  --ff-body:    "Instrument Sans", "Instrument Sans Fallback", Arial, sans-serif;

  --fz-display: clamp(2rem, 1.1rem + 2.6vw, 3.25rem);      /* 32 → 52  H1, display 600 */
  --fz-h2:      clamp(1.5rem, 1.2rem + 0.9vw, 2rem);       /* 24 → 32  display 600 */
  --fz-moment:  clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);  /* 22 → 28  display 600, one line per page */
  --fz-h3:      1.25rem;                                   /* 20       body 600 */
  --fz-lead:    1.125rem;                                  /* 18       body 400 */
  --fz-body:    clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);   /* 15 → 16  body 400 / 500 */
  --fz-name:    0.9375rem;                                 /* 15       product name, body 500 */
  --fz-price:   1.0625rem;                                 /* 17       price, body 600, tabular */
  --fz-ui:      0.9375rem;                                 /* 15       buttons, chips, day cells, nav */
  --fz-meta:    0.8125rem;                                 /* 13       producer, unit price, meta */
  --fz-tag:     0.75rem;                                   /* 12       tags */

  --lh-display: 1.06;
  --lh-h2:      1.15;
  --lh-moment:  1.25;
  --lh-tight:   1.3;    /* h3, names, producer */
  --lh-lead:    1.5;
  --lh-body:    1.55;
  --lh-ui:      1.1;

  --ls-display: -0.01em;   /* the only non-zero tracking */

  --measure:        64ch;
  --measure-lead:   54ch;
  --measure-moment: 26ch;

  /* ============ 3 · SPACING (4px grid) + RHYTHM ============ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;   /* shelf column gap */
  --sp-7: 48px;   /* shelf row gap */
  --sp-8: 64px;
  --sp-9: 96px;   /* band gutter */

  /* vertical rhythm: one fluid section step, one half step. Nothing else sets section padding. */
  --sec-y:      clamp(48px, 3rem + 3vw, 96px);
  --sec-y-half: clamp(24px, 1.5rem + 1.5vw, 48px);

  /* ============ 4 · LAYOUT ============ */
  --wrap:     1280px;
  --gutter:   clamp(16px, 2.5vw, 32px);   /* 16 → 32 */
  --header-h: 108px;                       /* 60 + 48; 92 (48 + 44) at ≤ 599 — see the media block */
  --sidebar-w:   260px;                    /* PLP filter sidebar, ≥ 1200 only */
  --sidebar-gap: 32px;

  /* Breakpoints: documentation + matchMedia only.
     CSS custom properties are INVALID inside @media — write literals there. Queries are max-width. */
  --bp-sm:     599px;
  --bp-shelf:  699px;
  --bp-md:     799px;
  --bp-lg:     899px;
  --bp-xl:    1199px;

  /* ============ 5 · SHAPE ============ */
  --rad-s:      6px;   /* buttons, tags, inputs */
  --rad-m:     10px;   /* photos on --photo-ground, tiles */
  --rad-l:     16px;   /* sheet, drawer, modal, c-band */
  --rad-pill: 999px;   /* chips, search, stepper, day cells, mode switch — nothing else */

  /* ============ 6 · ELEVATION (never in the page flow) ============ */
  --shadow-sheet: 0 16px 40px rgb(25 27 17 / .22);   /* sheet, drawer, modal */

  --z-raised:  1;
  --z-header: 30;
  --z-scrim:  40;
  --z-sheet:  50;
  --z-live:   60;

  /* ============ 7 · MOTION ============ */
  --t-press:  75ms;    /* :active scale(.97) */
  --t-colour: 150ms;   /* background / color / border-color */
  --t-fade:   200ms;   /* opacity + transform: sheet, drawer, count pop, toast */
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* ============ 8 · BRAND ASSETS ============ */
  --bs-logo-leaf: var(--fresh);
  --pattern-size: 120px;   /* footer corner only */

  /* ============ 9 · FOCUS & TARGETS ============ */
  --focus-ring-w:      2px;
  --focus-ring-offset: 2px;
  --target-min:        44px;
}

@media (max-width: 599px) {
  :root { --header-h: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 0ms; --t-colour: 0ms; --t-fade: 0ms; }
}