/* ============================================
   Lucky Tea (鹊茶) Design Tokens
   Extracted from official menu design
   ============================================ */

:root {
  /* Brand Colors — from menu watercolor palette */
  --color-bg-primary: #FAFAF7;        /* warm off-white, main background */
  --color-bg-wash: #D6E8E4;           /* ink-wash cyan, section backgrounds */
  --color-bg-wash-light: #EAF3F0;     /* lighter wash for cards */
  --color-accent-warm: #C8956C;        /* tea-brown/warm gold, accent */
  --color-accent-gold: #D4A853;        /* gold, CTAs and highlights */
  --color-text-primary: #1A1A1A;       /* near-black, body text */
  --color-text-secondary: #5A5A5A;     /* gray, secondary text */
  --color-text-light: #FFFFFF;         /* white text on dark bg */
  --color-border: #E0DDD5;            /* subtle warm border */

  /* Product accent colors (from drinks) */
  --color-strawberry: #E8687A;
  --color-mango: #F5A623;
  --color-matcha: #8DB255;
  --color-brown-sugar: #6B3E26;

  /* Typography */
  --font-display-en: 'Playfair Display', Georgia, serif;
  --font-body-en: 'Inter', -apple-system, sans-serif;
  --font-display-zh: 'Noto Serif SC', 'Songti SC', serif;
  --font-body-zh: 'Noto Sans SC', 'PingFang SC', sans-serif;
  --font-display-ar: 'Noto Naskh Arabic', 'Arabic Typesetting', serif;
  --font-body-ar: 'Noto Sans Arabic', 'Geeza Pro', sans-serif;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* Layout */
  --max-width: 1200px;
  --header-height: 72px;
}

/* RTL override for Arabic */
[dir="rtl"] {
  --font-display: var(--font-display-ar);
  --font-body: var(--font-body-ar);
}

[lang="zh"] {
  --font-display: var(--font-display-zh);
  --font-body: var(--font-body-zh);
}

[lang="en"] {
  --font-display: var(--font-display-en);
  --font-body: var(--font-body-en);
}