/* ============================================================
   Samurai Sushi & Grill — Design tokens
   "Tokyo Midnight, Sakura Blue & Jumeirah Hospitality"
   ============================================================ */
:root {
  /* Brand palette */
  --samurai-black: #050505;
  --samurai-ink: #111111;
  --samurai-charcoal: #1A1A1A;
  --samurai-surface: #202020;
  --samurai-blue: #54C7DA;
  --samurai-blue-light: #82D9E7;
  --samurai-blue-dark: #2695AA;
  --samurai-white: #FFFFFF;
  --samurai-rice: #F7F4EE;
  --samurai-mist: #E9F6F8;
  --samurai-grey: #A6A6A6;
  --samurai-border: rgba(255,255,255,0.14);
  --samurai-danger: #D76868;
  --samurai-success: #56B88A;
  --samurai-warning: #D6A956;

  /* Functional surfaces */
  --bg: var(--samurai-black);
  --bg-2: var(--samurai-ink);
  --bg-3: var(--samurai-charcoal);
  --surface: var(--samurai-surface);
  --surface-2: #262626;
  --overlay: rgba(5,5,5,0.72);
  --card: #181818;

  /* Text */
  --text: var(--samurai-rice);
  --text-strong: var(--samurai-white);
  --text-muted: #B4B0A9;
  --text-dim: var(--samurai-grey);
  --on-blue: #06232a;

  /* Lines / focus / states */
  --border: var(--samurai-border);
  --border-strong: rgba(255,255,255,0.24);
  --focus: var(--samurai-blue-light);
  --hover: rgba(84,199,218,0.12);
  --pressed: rgba(84,199,218,0.22);
  --disabled: rgba(255,255,255,0.35);
  --selection: rgba(84,199,218,0.32);
  --skeleton: linear-gradient(90deg,#1c1c1c 25%,#242424 37%,#1c1c1c 63%);

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow: 0 12px 34px rgba(0,0,0,0.5);
  --shadow-lg: 0 26px 70px rgba(0,0,0,0.6);
  --glow: 0 0 0 1px rgba(84,199,218,0.4), 0 8px 30px rgba(84,199,218,0.28);
  --grad-blue: linear-gradient(135deg,#54C7DA 0%,#79D9E7 45%,#2C9BB0 100%);
  --grad-dark: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0.55) 60%, rgba(5,5,5,0.92) 100%);

  /* Typography */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, Helvetica, sans-serif;
  --font-ar: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;

  --fs-300: 0.8125rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: clamp(1.25rem, 2.4vw, 1.5rem);
  --fs-700: clamp(1.6rem, 3.2vw, 2rem);
  --fs-800: clamp(2.1rem, 5vw, 3rem);
  --fs-900: clamp(2.6rem, 7.5vw, 5rem);
  --fs-price: clamp(3.2rem, 13vw, 7rem);

  /* Spacing */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;

  /* Layout */
  --container: 1240px;
  --narrow: 820px;
  --radius-sm: 10px; --radius: 16px; --radius-lg: 26px; --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur: 240ms;

  /* Z-index */
  --z-header: 100; --z-bottombar: 90; --z-drawer: 200; --z-modal: 300; --z-toast: 400; --z-loader: 500;

  --bottombar-h: 66px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --header-h: 74px;
  /* Single source of truth for sticky offsets (updated live by JS on resize) */
  --site-header-height: 74px;

  /* Warm ivory panel palette (for light editorial sections) */
  --panel-ivory: #F4EFE6;
  --panel-ivory-2: #EDE6D8;
  --on-ivory: #241d17;
  --on-ivory-muted: #6a5f52;
  --ivory-line: rgba(41,33,27,0.12);

  /* Textures */
  --paper: radial-gradient(rgba(41,33,27,0.05) 1px, transparent 1px);
  --timber: repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0 3px, transparent 3px 9px);
  --glow-cyan: 0 0 0 1px rgba(84,199,218,0.35), 0 10px 40px rgba(84,199,218,0.22);
}