/* ============================================================================================================
   VAZA design tokens — one brand for the staff app (/) and the customer pages (/order). Plain CSS, no build.
   ------------------------------------------------------------------------------------------------------------
   PRINCIPLES  1. Paper, leaf and petal: the colours of the logo (cream paper, olive leaves, blush peony).
               2. Colour carries meaning, not decoration: olive = act, petal = "yours / chosen", green/amber/red =
                  stock and status. Everything else is ink on paper.
               3. Georgian first: Mkhedruli has tall ascenders/descenders and no capitals, so lines get extra
                  leading, emphasis comes from weight and size (never ALL CAPS), Latin brand text uses Cormorant.
               4. Thumb first: every target >= 44px, fields >= 16px text (no iOS zoom), 4px spacing grid.
               5. Calm: soft shadows, short motion that switches off with prefers-reduced-motion.
   LAYERS      primitives (--paper-*, --leaf-*, --petal-*, --gold-*)  ->  semantic roles (--bg, --ink, --accent…)
               -> components (in each page's CSS). Components use ONLY semantic roles, never primitives, so the
               dark theme only re-maps roles.
   THEMES      light by default; dark via prefers-color-scheme unless <html data-theme="light">, or forced with
               <html data-theme="dark"> (the staff app's switch). Pages need not restate the palette for data-theme.
   SPECIFICITY brand palette = :root / html:root[data-theme] (wins over a page's restated copy, so the brand is
               the same everywhere); scales and the re-tunable roles (--line-strong --focus --scrim, spacing,
               radii, sizes, motion) sit in :where(:root) = zero specificity, so a page's own :root may re-tune them.

   TOKEN REFERENCE (semantic — use these)                       contrast, light / dark (WCAG: text 4.5, UI 3)
   surfaces   --bg page · --surface card · --surface-2 sunken/filled control · --surface-3 hover/pressed
              --photo-tile (behind product photos on white)
   lines      --line hairline divider (decorative) · --line-strong field/control border       3.6 / 3.9 on surface
   text       --ink body & headings                                                          15.4 / 14.2 on surface
              --muted secondary text                                                          6.9 / 7.0 on surface
              --faint placeholder, disabled (non-essential only)                              3.6 / 4.8
   brand      --accent primary action, links, focus (olive / sage)                            8.0 / 9.6 on surface
              --accent-hover · --accent-ink text on accent (8.1 / 9.3) · --accent-soft tint · --accent-line (3.6 / 3.8)
              --petal "chosen" highlight (selected rows, ornaments) · --petal-soft · --petal-ink   5.9 / 8.5
              --gold hairline ornaments only (never text) · --olive legacy brand green (= leaf)
   status     --green / --green-soft  success, in stock       6.0 / 8.1 (on soft: 5.3 / 6.7)
              --amber / --amber-soft  warning, few left       5.8 / 10.0 (on soft: 5.3 / 8.0)
              --red   / --red-soft    error, sold out, danger 5.4 / 7.5 (on soft: 4.7 / 6.6)
              aliases: --success --warning --danger (+ -soft)
   focus      --focus colour · --focus-ring (box-shadow for fields) · :focus-visible outline is set below
   type       --font (Noto Sans Georgian + system) · --brand (Cormorant Garamond, Latin wordmark)
              --font-display (Cormorant for Latin + Noto Georgian, size-matched: headings, variety names)
              --mono · sizes --fs-xs 13 · sm 14 · btn 15 · md 16 · lg 18 · xl 22 · 2xl 26 · 3xl 32 · display (fluid)
              --lh 1.55 body · --lh-tight 1.3 headings · --lh-snug 1.42 · weights --fw-regular/medium/semibold/bold
   space      --s-1 4 · s-2 8 · s-3 12 · s-4 16 · s-5 24 · s-6 32 · s-7 40 · s-8 48 · s-9 64
   radius     --r-xs 8 · --r-sm 10 · --r-md 12 · --r 14 (legacy card radius) · --r-lg 20 · --r-xl 28 · --r-pill
   elevation  --shadow (= --shadow-1, resting card) · --shadow-2 raised (sticky bar, menus) · --shadow-3 toast/dialog
   motion     --dur-1 120ms (press) · --dur-2 200ms (state) · --dur-3 300ms (enter) · --ease · --ease-out
              all 0ms under prefers-reduced-motion
   layers     --z-sticky 10 · --z-header 20 · --z-bar 30 · --z-toast 35 · --z-overlay 40 · --z-modal 50 · --z-skip 60
   size       --tap 44px minimum target · --tap-md 48 · --tap-lg 56 · --btn-h 48 buttons · --field-h 48 inputs

   COMPONENT RECIPES (how the customer pages use the roles; the staff app may follow the same)
   button     .btn: --btn-h, --r-pill, --fs-btn bold. primary = --accent / --accent-ink; ghost = --surface +
              --line-strong border; quiet = text only (--muted); danger = --red / white. Disabled: opacity .55.
   chip       pill, --surface + --line border, --fs-btn semibold; pressed = --accent fill; count badge --surface-2.
   stepper    pill of --surface-2, 44px − / number / + ; "+" in --accent; with a quantity: --surface, --accent-line.
   card       --surface, 1px --line, --r-lg, --shadow; photo on --photo-tile (multiply blend removes white).
   badge      stock: "in" = --green dot + text, quiet; "low" = --amber on --amber-soft pill; "out" = --red-soft pill.
   notice     --r, --s-3/--s-4 padding: neutral --surface-2; ok --green-soft + check; error --red-soft + --red.
   toast      --ink background, --bg text, --shadow-3, rises above the sticky bar.
   input      --field-h, --r-sm, 1px --line-strong; focus = --accent border + --focus-ring; invalid = --red.
   sticky bar floating --surface panel, --r-lg, --shadow-2; total in --fs-xl tabular numerals.
   ============================================================================================================ */

@font-face { font-family: "Noto Sans Georgian"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/noto-georgian.woff2) format("woff2");
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; }
@font-face { font-family: "Noto Sans Georgian"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/noto-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/cormorant-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Display face: Cormorant for Latin (variety names like "Red Naomi"), Noto Sans Georgian for Mkhedruli, sized so the
   two scripts look the same size side by side (Cormorant's x-height is small). Digits and ₾ stay in Noto (see below). */
@font-face { font-family: "VAZA Display"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/cormorant-latin.woff2) format("woff2");
  size-adjust: 116%; unicode-range: U+0041-005A, U+0061-007A, U+00C0-00FF, U+0131, U+0152-0153, U+2018-201E; }
@font-face { font-family: "VAZA Display"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/noto-georgian.woff2) format("woff2");
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; }

:where(:root) {
  /* ---------- primitives (do not use in components) ---------- */
  --paper-0: #fffdf9; --paper-50: #f8f5ee; --paper-100: #f1ece1; --paper-150: #ebe4d6; --paper-200: #e5ddcd; --paper-300: #d3c9b5;
  --stone-500: #8c8572; --stone-600: #5e594c; --stone-900: #23241d;
  --leaf-50: #eef1e6; --leaf-100: #dfe5d0; --leaf-300: #b8c98f; --leaf-500: #6b7d52; --leaf-700: #45552f; --leaf-800: #364425; --leaf-900: #1a2110;
  --petal-50: #fbefeb; --petal-100: #f6dcd4; --petal-300: #e9b3a5; --petal-700: #a2483a;
  --gold-300: #d8c595; --gold-500: #b39a5e;

  /* ---------- theme-independent ---------- */
  --success: var(--green); --success-soft: var(--green-soft); --warning: var(--amber); --warning-soft: var(--amber-soft);
  --danger: var(--red); --danger-soft: var(--red-soft);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus) 24%, transparent);

  --font: "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-display: "VAZA Display", "Noto Sans Georgian", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 13px; --fs-sm: 14px; --fs-btn: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 26px; --fs-3xl: 32px;
  --fs-display: clamp(30px, 5.2vw + 12px, 48px);
  --lh: 1.55; --lh-snug: 1.42; --lh-tight: 1.3;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px;
  --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --tap: 44px; --tap-md: 48px; --tap-lg: 56px; --btn-h: 48px; --field-h: 48px;

  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 300ms;
  --ease: cubic-bezier(.2, .9, .25, 1); --ease-out: cubic-bezier(.2, .8, .2, 1);

  --z-sticky: 10; --z-header: 20; --z-bar: 30; --z-toast: 35; --z-overlay: 40; --z-modal: 50; --z-skip: 60;

  /* light values of the roles a page may re-tune for itself (zero specificity, see SPECIFICITY above) */
  --line-strong: var(--stone-500); --focus: var(--leaf-700); --scrim: rgb(25 24 18 / .45);
}

/* ---------- semantic roles: light (the brand palette) ---------- */
:root, html:root[data-theme="light"] {
  --bg: var(--paper-50); --surface: var(--paper-0); --surface-2: var(--paper-100); --surface-3: var(--paper-150);
  --photo-tile: #f6f2ea;
  --line: var(--paper-200);
  --ink: var(--stone-900); --muted: var(--stone-600); --faint: var(--stone-500);
  --accent: var(--leaf-700); --accent-hover: var(--leaf-800); --accent-ink: #ffffff; --accent-soft: var(--leaf-50); --accent-line: #7d8c62;
  --petal: var(--petal-300); --petal-soft: var(--petal-50); --petal-ink: var(--petal-700);
  --gold: var(--gold-500); --olive: #4a5a3a;
  --green: #1f6f4a; --green-soft: #e4f1e8; --amber: #925600; --amber-soft: #fff1d6; --red: #c92a2a; --red-soft: #fde8e8;
  --shadow-1: 0 1px 2px rgb(52 48 30 / .05), 0 3px 12px -2px rgb(52 48 30 / .06);
  --shadow-2: 0 2px 6px rgb(52 48 30 / .06), 0 12px 32px -8px rgb(52 48 30 / .16);
  --shadow-3: 0 6px 16px rgb(30 28 18 / .14), 0 24px 48px -12px rgb(30 28 18 / .28);
  --shadow: var(--shadow-1);
  --photo-filter: none;
  color-scheme: light;
}

/* ---------- semantic roles: dark ("night garden": deep leaf-black, cream ink, sage action, dusty petal) ----------
   Same roles, re-mapped — not an inversion. Photos sit on a dimmed cream tile so white backgrounds don't glare. */
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) {
    --bg: #121410; --surface: #1a1d17; --surface-2: #23271f; --surface-3: #2c3127; --photo-tile: #e4dccb;
    --line: #30362a;
    --ink: #efeadd; --muted: #aca593; --faint: #858b76;
    --accent: var(--leaf-300); --accent-hover: #c9d7a6; --accent-ink: var(--leaf-900); --accent-soft: #262d1d; --accent-line: #6d7c52;
    --petal: #c98a7c; --petal-soft: #2c2220; --petal-ink: #e7a998;
    --gold: #9f8a57; --olive: #c3cfa6;
    --green: #6cc490; --green-soft: #183024; --amber: #f2be6a; --amber-soft: #3a2c14; --red: #ff8a80; --red-soft: #3f1d1b;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .35), 0 0 0 1px rgb(255 255 255 / .02);
    --shadow-2: 0 2px 8px rgb(0 0 0 / .4), 0 16px 40px -10px rgb(0 0 0 / .6);
    --shadow-3: 0 8px 20px rgb(0 0 0 / .45), 0 28px 56px -12px rgb(0 0 0 / .7);
    --shadow: var(--shadow-1);
    --photo-filter: brightness(.94) saturate(1.04);
    color-scheme: dark;
}
  :where(:root:not([data-theme="light"])) {
    --line-strong: #767c66; --focus: var(--leaf-300); --scrim: rgb(0 0 0 / .6);
  }
}
html:root[data-theme="dark"] {
  --bg: #121410; --surface: #1a1d17; --surface-2: #23271f; --surface-3: #2c3127; --photo-tile: #e4dccb;
  --line: #30362a;
  --ink: #efeadd; --muted: #aca593; --faint: #858b76;
  --accent: var(--leaf-300); --accent-hover: #c9d7a6; --accent-ink: var(--leaf-900); --accent-soft: #262d1d; --accent-line: #6d7c52;
  --petal: #c98a7c; --petal-soft: #2c2220; --petal-ink: #e7a998;
  --gold: #9f8a57; --olive: #c3cfa6;
  --green: #6cc490; --green-soft: #183024; --amber: #f2be6a; --amber-soft: #3a2c14; --red: #ff8a80; --red-soft: #3f1d1b;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .35), 0 0 0 1px rgb(255 255 255 / .02);
  --shadow-2: 0 2px 8px rgb(0 0 0 / .4), 0 16px 40px -10px rgb(0 0 0 / .6);
  --shadow-3: 0 8px 20px rgb(0 0 0 / .45), 0 28px 56px -12px rgb(0 0 0 / .7);
  --shadow: var(--shadow-1);
  --photo-filter: brightness(.94) saturate(1.04);
  color-scheme: dark;
}
:where(:root[data-theme="dark"]) {
  --line-strong: #767c66; --focus: var(--leaf-300); --scrim: rgb(0 0 0 / .6);
}
@media (prefers-reduced-motion: reduce) { html:root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } }

/* ---------- base (kept small: the staff app loads this file too). Wrapped in :where() = zero specificity, so any
   rule in a page's own CSS wins whatever order the files load in. ---------- */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body) { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-md)/var(--lh) var(--font); -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3) { line-height: var(--lh-tight); margin: 0; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(input, select, textarea) { font-size: max(16px, 1em); line-height: 1.4; }
:where(button, a, label, select, summary) { touch-action: manipulation; }
/* thumb first: no double-tap zoom on fields either, and a long press on a button neither selects its text nor opens
   the iOS callout (links keep their callout: "copy link" is useful). */
:where(input, textarea) { touch-action: manipulation; }
:where(button) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
::selection { background: color-mix(in srgb, var(--petal) 45%, transparent); }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
:where(:focus:not(:focus-visible)) { outline: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* The badge Netlify injects on published pages covers the bottom-right of every sheet (and the buttons there). */
#nl-badge-frame, #nl-hud-frame { display: none !important; }