/* ============================================================
   KOY Pantry Design Tokens — v2 (brandbook-first)
   THEME COPY: synced from design-system/tokens.css. Only change vs source:
   @font-face src paths are ../fonts/ (fonts live in theme assets/fonts/).
   Edit the design-system source first, then re-sync this file.
   Source of truth: KOY BRANDBOOK.pdf (Selim Ekmen, 2022) + SITE_BRIEF.md
   Date: 2026-08-29
   Spelling rule: "Koy Pantry" / "KOY" in text — never "Köy".
   The wordmark artwork renders K Ō Y (macron), text never does.
   ============================================================ */

@font-face {
  font-family: 'Statoil';
  src: url('../fonts/statoil-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brandon';
  src: url('../fonts/brandon-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brandon';
  src: url('../fonts/brandon-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand core (BRANDBOOK p5) ---------- */
  --koy-beige:     #fdf9f4;  /* Hero Color 2 — canvas, light logo colorway */
  --koy-warmgray7: #958a82;  /* Hero Color 1 — logo, secondary text, hairline art */
  --koy-warmgray2: #cbc3ba;  /* print/packaging neutral — borders, alt surface */
  --koy-black6:    #111821;  /* ink — text, dark surfaces, label logo colorway */

  /* ---------- Accent system (BRANDBOOK p6, packaging colors) ---------- */
  --koy-red:     #f74f58;    /* Pantone Red 032 U */
  --koy-warmred: #fa4238;    /* Pantone Warm Red C */
  --koy-green:   #d1ea8d;    /* Pantone 372 C */
  --koy-yellow:  #f6de8c;    /* Pantone 1205 C */
  --koy-purple:  #b292d0;    /* print label accent — sampled from the real
                                Figs in Syrup label (03_labels), not in brandbook p6 */
  --koy-wheat:   #d8a65a;    /* grain gold — bulgur tone, digital category accent
                                (not in brandbook; see DESIGN_DECISIONS D16) */

  /* ---------- Derived UI tints (not in brandbook; documented in BRAND.md §4) ---------- */
  --koy-beige-2:       #f6efe6;  /* deeper canvas band for section alternation */
  --koy-line-soft:     #e9e4dd;  /* hairlines and input borders on beige */
  --koy-red-deep:      #c2333c;  /* AA-safe red: text-on-light, red button fills */
  --koy-ink-soft:      #4a4440;  /* long-form body text on beige (softer than black6) */
  --koy-green-deep:    #5d6b2f;  /* AA-safe green for text/icons on light */
  --koy-yellow-deep:   #8a6d1f;  /* AA-safe yellow-family text on light */
  --koy-purple-deep:   #6b4f8a;  /* AA-safe purple for text/icons on light */
  --koy-wheat-deep:    #7d5a1e;  /* AA-safe wheat/amber for text/icons on light */

  /* ---------- Accent washes (accent rhythm — BRAND.md §4b) ----------
     Pale accent-over-beige tints for section grounds: movement without
     saturation. Body text on a wash = --koy-ink or --koy-ink-soft (AA holds). */
  --koy-green-wash:  #eef3d8;
  --koy-yellow-wash: #faf0d6;
  --koy-purple-wash: #ede4f0;
  --koy-wheat-wash:  #f5e8d2;
  --koy-red-wash:    #f9e2de;

  /* ---------- Semantic roles ---------- */
  --koy-bg:          var(--koy-beige);
  --koy-surface:     #ffffff;          /* cards, labels — the "label white" of packaging */
  --koy-surface-alt: var(--koy-beige-2);
  --koy-ink:         var(--koy-black6);
  --koy-body:        var(--koy-ink-soft);
  --koy-muted:       var(--koy-warmgray7);
  --koy-line:        var(--koy-warmgray2);
  --koy-accent:      var(--koy-red);       /* single pop accent, use sparingly (web concept p35) */
  --koy-accent-ink:  var(--koy-red-deep);  /* accent when it must carry text/small elements */
  --koy-dark:        var(--koy-black6);    /* dark section background */
  --koy-on-dark:     var(--koy-beige);     /* text/logo on dark */

  /* ---------- Category accents (v3 — see DESIGN_DECISIONS.md D3/D14/D16) ----
     User decision 2026-08-29: pistachio belongs to SWEETS (best seller) and
     Sweets takes the pistachio green; Grains gets the new wheat/bulgur gold.
     Pastes stays red (real tomato/pepper labels). Purple remains a
     label/story accent outside the category system.
     Rule: category color NEVER alone — always paired with text label.       */
  --koy-cat-grains: var(--koy-wheat);
  --koy-cat-pastes: var(--koy-red);
  --koy-cat-sweets: var(--koy-green);

  /* ---------- Typography ---------- */
  --koy-font-display: 'Statoil', 'Brandon', 'Avenir Next', 'Segoe UI', sans-serif;
  --koy-font-body:    'Brandon', 'Avenir Next', 'Segoe UI', sans-serif;

  --koy-text-display: clamp(2.5rem, 6vw, 4rem);      /* editorial hero */
  --koy-text-h2:      clamp(1.75rem, 4vw, 2.5rem);   /* section heading */
  --koy-text-h3:      1.375rem;
  --koy-text-body:    1.0625rem;                     /* 17px */
  --koy-text-small:   .875rem;                       /* 14px */
  --koy-text-eyebrow: .6875rem;                      /* 11px, uppercase */

  --koy-track-eyebrow:  .28em;   /* ARTISAN TURKISH PANTRY style */
  --koy-track-wordmark: .35em;
  --koy-leading-body:  1.65;
  --koy-leading-tight: 1.15;

  /* ---------- Space / radius / elevation ---------- */
  --koy-sp-1: 4px;  --koy-sp-2: 8px;   --koy-sp-3: 12px; --koy-sp-4: 16px;
  --koy-sp-5: 24px; --koy-sp-6: 32px;  --koy-sp-7: 48px; --koy-sp-8: 64px;
  --koy-sp-9: 96px;

  --koy-radius-sm: 2px;      /* labels, inputs — packaging is square-cornered */
  --koy-radius-md: 8px;      /* cards, photos */
  --koy-radius-window: 14px; /* product-photo "window" — echoes box die-cut */
  --koy-radius-pill: 999px;  /* pills, lid-sticker circles */

  --koy-shadow-card: 0 1px 2px rgba(17, 24, 33, .05), 0 10px 28px rgba(17, 24, 33, .06);
  --koy-shadow-lift: 0 2px 6px rgba(17, 24, 33, .08), 0 16px 40px rgba(17, 24, 33, .10);

  /* ---------- Motion (SITE_BRIEF motion spec) ----------
     Principle: few, flawless, meaningful — feedback, not decoration.
     Transform/opacity only; off under prefers-reduced-motion;
     no parallax on mobile; reveals fire once. */
  --koy-dur-fast: 200ms;   /* hovers, link underline, button states */
  --koy-dur-base: 400ms;   /* scroll reveals, section transitions */
  --koy-dur-slow: 600ms;   /* image zooms, page cross-fade */
  --koy-ease-out: cubic-bezier(.16, 1, .3, 1);
  --koy-ease:     cubic-bezier(.4, 0, .2, 1);   /* legacy alias, prefer ease-out */
  --koy-dur:      var(--koy-dur-fast);          /* legacy alias */
  --koy-reveal-dist: 14px;   /* fade+rise distance (12-16px band) */
  --koy-reveal-stagger: 70ms;/* grid stagger (60-80ms band) */
  --koy-zoom-hover: 1.04;    /* image hover zoom (1.03-1.05, slow) */

  /* ---------- Responsive (SITE_BRIEF responsive rules) ----------
     Behavior is defined by tokens + rules — never a separate design per screen.
     NOTE: CSS custom properties cannot be used inside @media conditions;
     these breakpoint tokens are the canonical values for hand-written queries. */
  --koy-bp-sm: 640px;    /* end of phone band — trio unstacks, grids widen */
  --koy-bp-lg: 1024px;   /* tablet → desktop */
  --koy-bp-xl: 1440px;   /* wide desktop */
  --koy-container:      1200px;  /* default content width */
  --koy-container-wide: 1360px;  /* product grids, editorial heroes */
  --koy-container-text: 68ch;    /* long-form reading measure */
  /* Fluid spacing — the single scaling rule: clamp() flows with the viewport,
     no per-breakpoint spacing overrides. */
  --koy-sp-section: clamp(48px, 8vw, 96px);  /* vertical section rhythm */
  --koy-sp-gutter:  clamp(16px, 4vw, 32px);  /* horizontal page gutter */
  --koy-sp-block:   clamp(24px, 4vw, 48px);  /* intra-section block gap */

  /* ---------- Touch / a11y ---------- */
  --koy-touch-min: 44px;
  --koy-focus-ring: 2px solid var(--koy-black6);
  --koy-focus-offset: 2px;
}