/* ==========================================================================
   HOCHWALD Kebab & Pizzeria — Design Tokens
   ========================================================================== */

:root {
  /* Surfaces */
  --color-cream: #f8f2e9;
  --color-cream-deep: #f3e9da;
  --color-cream-soft: #fbf7f1;
  --color-surface: #ffffff;
  --color-surface-glass: rgba(255, 253, 250, 0.86);
  --color-card: #fffdfa;

  /* Brand */
  --color-gold: #c4883f;
  --color-gold-dark: #a96f2c;
  --color-gold-light: #d9a25b;
  --color-gold-pale: #f6dcaa;
  --color-gold-pale-2: #f2d19a;
  --color-price-brush: #f4c979;
  --color-beige-brush: #ecd8bb;
  --color-icon-bg: #f2cf94;

  --color-green: #2e3c21;
  --color-green-dark: #1d3a22;
  --color-green-brush: #4a6534;
  --color-green-vegan: #3a7d2b;

  --color-red: #d8141c;
  --color-red-dark: #b50f16;
  --color-flame: #e8471d;
  --color-brown-icon: #a3432a;

  /* Text */
  --color-text: #141414;
  --color-text-soft: #2c2c2c;
  --color-text-muted: #5f5a54;
  --color-text-faint: #8d877f;
  --color-white: #ffffff;
  --color-navy-logo: #1c2230;

  /* Lines */
  --color-divider: #ece3d6;
  --color-border: #efe6d9;

  /* Typography */
  --font-body: "Roboto", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-condensed: "Roboto Condensed", "Cairo", "Roboto", sans-serif;
  --font-display: "Anton", "Roboto Condensed", "Cairo", sans-serif;
  --font-script: "Kaushan Script", "Aref Ruqaa", cursive;
  --font-hand: "Caveat", "Aref Ruqaa", cursive;
  --font-arabic: "Cairo", "Roboto", sans-serif;
  --font-arabic-script: "Aref Ruqaa", "Cairo", serif;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 4px 18px rgba(96, 64, 24, 0.08);
  --shadow-card: 0 6px 22px rgba(96, 64, 24, 0.10), 0 1px 3px rgba(96, 64, 24, 0.06);
  --shadow-float: 0 10px 34px rgba(80, 52, 18, 0.14);
  --shadow-button: 0 4px 12px rgba(169, 111, 44, 0.32);
  --shadow-red: 0 4px 12px rgba(216, 20, 28, 0.28);
  --shadow-nav: 0 -6px 28px rgba(80, 52, 18, 0.10);

  /* Layout */
  --page-gutter: 14px;
  --page-max: 1180px;
  --header-height: 92px;
  --bottom-nav-height: 68px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 620ms;

  /* Brush masks (inline so they work on every host) */
  --mask-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M10 30 C28 22 44 26 60 20 C110 14 150 18 196 13 C250 9 300 14 340 10 C360 9 378 12 394 16 L386 26 L398 34 L388 42 L399 52 L386 60 L396 70 L384 78 C350 86 310 84 270 88 C220 92 170 88 120 91 C80 93 44 90 12 86 L20 78 L4 70 L16 62 L2 52 L14 44 L3 36 Z'/%3E%3C/svg%3E");
  --mask-brush-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M18 34 C60 18 120 22 180 16 C240 10 300 18 360 14 C376 13 390 18 396 26 C384 34 398 44 390 52 C398 62 386 70 392 78 C340 90 280 86 220 90 C160 94 100 88 50 92 C30 93 14 88 6 80 C16 72 2 64 12 56 C2 48 14 42 18 34 Z'/%3E%3C/svg%3E");
  --mask-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 12 C40 6 100 4 196 6 C160 10 110 12 60 16 C40 17 18 17 4 12 Z'/%3E%3C/svg%3E");
}