/* =========================================================================
   Kingsway Cellars — design tokens
   One accent (ticket yellow), bottle-glass ink, cool shelf neutrals.
   ========================================================================= */

:root {
  /* ---- colour ---------------------------------------------------------- */
  --ink: #0e1f19; /* bottle-glass black-green: text, headers, primary */
  --ink-80: #23342e;
  --ink-60: #4a5a53;
  --ink-40: #7d8b85;
  --ink-25: #a9b3ae;

  --bottle: #1b4d3a; /* secondary green: staff chrome, active states */
  --bottle-tint: #e4ede8;

  --ticket: #ffc72c; /* THE accent — promotions, savings, deals */
  --ticket-deep: #e5ac10;
  --ticket-tint: #fff4d4;

  --shelf: #eeefe8; /* app background — warm shelf paper, not cool grey */
  --surface: #ffffff;
  --surface-sunk: #f6f5ef;
  --cream: #f8f5ed; /* ivory well behind product artwork */
  --rule: #dcdcd1;
  --rule-strong: #bcbdb0;

  --alert: #b23a2f;
  --alert-tint: #fbeceb;
  --info: #2c5c7a;
  --info-tint: #e8f0f5;

  --focus: #1466c0;

  /* ---- typography ------------------------------------------------------ */
  --font-ui: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  /* Scale floors at 12px — nothing below that reads on a counter screen. */
  --text-3xl: 2.375rem; /* 38 */
  --text-2xl: 1.75rem; /* 28 */
  --text-xl: 1.375rem; /* 22 */
  --text-lg: 1.125rem; /* 18 */
  --text-md: 1rem; /* 16 — body */
  --text-sm: 0.875rem; /* 14 */
  --text-xs: 0.8125rem; /* 13 */
  --text-2xs: 0.75rem; /* 12 */

  /* ---- line height — keep lines apart, uppercase tracking readable ------ */
  --lh-body: 1.55;
  --lh-tight: 1.25;

  /* ---- spacing (4px base) ---------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;

  /* ---- radii — hard-edged retail, never pill-shaped cards --------------- */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  /* ---- elevation — flat by default, shadow only for overlays ----------- */
  --shadow-raise: 0 1px 2px rgba(14, 31, 25, 0.06);
  --shadow-lift: 0 6px 18px -6px rgba(14, 31, 25, 0.18),
    0 2px 4px rgba(14, 31, 25, 0.05);
  --shadow-overlay: 0 12px 32px rgba(14, 31, 25, 0.22);
  --shadow-bar: 0 -2px 12px rgba(14, 31, 25, 0.12);

  /* ---- layout ---------------------------------------------------------- */
  --shell-max: 1440px;
  --pos-max: 1280px;
  --tap: 44px; /* minimum touch target */
  --header-h: 62px;
  --admin-rail: 256px;

  /* ---- motion ---------------------------------------------------------- */
  --t-fast: 110ms ease;
  --t-med: 180ms cubic-bezier(0.2, 0, 0.15, 1);
}

/* Breakpoints (documented — CSS custom properties can't be used in queries)
   sm  480px   large phone
   md  720px   small tablet / landscape phone
   lg  900px   tablet
   xl  1180px  laptop
   2xl 1440px  desktop
*/

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-med: 1ms;
  }
}