/* ===== Kaya design tokens: the one source of colours, type, corners and shadows =====
   Loaded first by every page (website, QR menu, admin, orders board, stock page). Pages
   choose among these; they never define their own colours. */
:root {
  /* Brand */
  --green-900: #15301d;
  --green: #1f4a2c;
  --green-600: #2f5e3b;
  --green-100: #e3e9df;
  --sage: #7d8664;
  --sage-200: #c9cbb0;
  --cream: #f6ecdc;
  --cream-light: #fbf4e6;
  --paper: #efe1c8;
  --paper-2: #e7d5b6;
  --card: #fffaf2;
  --wood: #c49a6c;
  --wood-light: #d9b98a;
  --glow: #ffc46e; /* lamp light on the website */
  --choc: #4a2a1a;
  --white: #fff;
  --black: #000;

  /* Orange: bright for decoration only; -ink for text and for buttons with text (5:1 on cream,
     5.9:1 under white); -soft for text on dark green (4.8:1). */
  --orange: #e2802b;
  --orange-ink: #9e4f0d;
  --orange-soft: #f0a25c;

  /* Text and lines */
  --ink: #23271f;
  --muted: #625b4b; /* 4.5:1 or more on every light background, paper included */
  --line: rgba(31, 74, 44, .12);
  --line-strong: rgba(31, 74, 44, .28);

  /* States: always paired with an icon or a word, never colour alone */
  --red: #ad3519; /* 4.8:1 or more on every pale red background */
  --danger-ink: #8a3b12;
  --danger-bg: #fbe3d2;
  --danger-bg-strong: #f6dcd3;
  --danger-bg-soft: #fdf1ec;
  --warn-ink: #7a3b00;
  --warn-bg: #fde7c8;
  --warn-bg-soft: #fbefd9;
  --warn-line: #e9b46b;
  --success: #2fa35a;
  --success-ink: #0f6b34;
  --success-bg: #e6f4ea;
  --success-soft: #8fe0a0; /* on dark green only */
  --info: #2c6a8a;
  --gofood-ink: #a1122a;
  --gofood-bg: #fde8ea;

  /* Charts (admin reports) */
  --chart-grid: #e7e0d2;
  --chart-base: #cfc7b6;
  --chart-axis: #7a725f;
  --chart-tip: #fffefb;
  --chart-bar: #2e7d4a;
  /* Sales channels: categorical slots 1–3, in this order (adjacent pairs validated against
     --card: worst colour-blind ΔE 9.2, normal vision 27.6). Aqua is under 3:1, so every chart
     with them also has labels or a table view. */
  --chart-inhouse: #2a78d6;
  --chart-gofood: #eb6834;
  --chart-grabfood: #1baf7a;
  --chart-cost: #c9c2b2; /* ingredients */
  --chart-commission: #8c8474;
  /* Sequential blue for the busy-hours heat map: 100 / 250 / 400 / 550 / 700 */
  --heat-1: #cde2fb;
  --heat-2: #86b6ef;
  --heat-3: #3987e5;
  --heat-4: #1c5cab;
  --heat-5: #0d366b;

  /* Type */
  --script: "Pacifico", cursive;
  --display: "Bebas Neue", Impact, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  /* Type scale: every size on every page is one of these (big titles use clamp()). */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 22px;
  --fs-3xl: 26px;
  --fs-4xl: 30px;
  --fs-5xl: 36px;
  --fs-6xl: 46px;
  --fs-7xl: 58px;

  /* Spacing scale for margin, padding and gap; the number is the size in px. Values off the
     scale (1, 3, 5, 7, 9, 11, 15px and negative nudges) are optical one-offs, left as px. */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-30: 30px;
  --sp-32: 32px;
  --sp-36: 36px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-60: 60px;
  --sp-64: 64px;
  --sp-72: 72px;
  --sp-80: 80px;

  /* Corners */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 36px;
  --r-2xl: 48px;
  --r-pill: 999px;

  /* Shadows and motion */
  --shadow-sm: 0 16px 40px -22px rgba(30, 40, 20, .45);
  --shadow-md: 0 20px 50px -25px rgba(30, 40, 20, .35);
  --shadow-lg: 0 30px 60px -30px rgba(40, 30, 10, .35);
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Durations for hover, focus and toggles (entrance animations may run longer). */
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 300ms;
}