/* ==========================================================================
   Antalya Kebab Haus — Design Tokens
   Warm ivory base, ruby & leaf-green brand accents, amber as a warm highlight.
   Light but never plain white: the page sits on a warm stone tone so the food
   photography reads as the brightest thing on screen.
   ========================================================================== */

:root {
  /* Primary & Accent Colors.
     Each accent has a darker "-ink" variant for small text, because the
     bright brand tones do not carry enough contrast on a light ground. */
  --color-red: #D91E2B;
  --color-red-dark: #A9151F;
  --color-red-ink: #A9151F;
  --color-red-glow: rgba(217, 30, 43, 0.28);
  --color-red-tint: rgba(217, 30, 43, 0.10);

  /* Text-safe on ivory (>=5.5:1). The lighter amber below is for fills,
     borders and anything sitting on the dark photo scrims. */
  --color-gold: #8A5410;
  --color-gold-bright: #C97E1B;
  --color-gold-dark: #9A5F12;
  --color-gold-ink: #8A5410;
  --color-gold-glow: rgba(201, 126, 27, 0.25);

  /* Leaf green from the real Antalya shop sign (the "Y" and "Kebab Haus"). */
  --color-green: #4CA83D;
  --color-green-bright: #5FBF4C;
  --color-green-dark: #35802A;
  --color-green-ink: #2C6B24;
  --color-green-glow: rgba(76, 168, 61, 0.28);
  --color-green-tint: rgba(76, 168, 61, 0.12);

  /* Warm ivory neutrals */
  --color-bg: #F4F0E8;
  --color-bg-alt: #EBE5DA;
  --color-surface: #FBF9F5;
  --color-surface-card: #FFFFFF;
  --color-surface-hover: #F3EEE4;
  --color-line: rgba(38, 30, 22, 0.12);
  --color-line-gold: rgba(201, 126, 27, 0.28);

  /* Frosted panel primitives */
  --glass-bg: rgba(251, 249, 245, 0.82);
  --glass-bg-card: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(38, 30, 22, 0.10);
  --glass-blur: blur(16px);

  /* Subtle raised fills (chips, inputs, quiet buttons) */
  --fill-subtle: rgba(38, 30, 22, 0.05);
  --fill-subtle-hover: rgba(38, 30, 22, 0.09);

  /* Scrims laid over photography — these stay dark on purpose so white
     text keeps its contrast on top of the food images. */
  --scrim-strong: rgba(20, 14, 10, 0.85);
  --scrim-mid: rgba(20, 14, 10, 0.55);
  --scrim-soft: rgba(20, 14, 10, 0.25);

  /* Typography Colors */
  --color-ink: #231D17;
  --color-ink-muted: #4E463C;
  --color-ink-soft: #736A5E;
  --color-ink-invert: #FBF9F5;

  /* Paper / Receipt */
  --color-paper: #FCFAF6;
  --color-paper-shadow: rgba(38, 30, 22, 0.22);

  /* Typography Fonts */
  --font-display: "Plus Jakarta Sans", "Poppins", -apple-system, sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-body: "Inter", "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-mono: "Space Mono", monospace;

  /* Typography Scale */
  --fs-xs: 0.82rem;
  --fs-sm: 0.92rem;
  --fs-base: 1rem;
  --fs-md: 1.18rem;
  --fs-lg: 1.45rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.8rem;
  --fs-3xl: 3.8rem;

  /* Spacing Scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4.5rem;
  --space-2xl: 7rem;

  /* Border Radii */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* Shadows & Glows */
  --shadow-soft: 0 8px 24px rgba(38, 30, 22, 0.10);
  --shadow-lift: 0 18px 44px rgba(38, 30, 22, 0.18);
  --glow-red: 0 0 30px rgba(217, 30, 43, 0.22);
  --glow-gold: 0 0 30px rgba(201, 126, 27, 0.20);

  /* Layout */
  --content-width: 1200px;
  --header-height: 80px;
  --tap-min: 44px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 350ms;
}

@media (min-width: 860px) {
  :root {
    --header-height: 94px;
  }
}

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


/* ==========================================================================
   Dark theme — the original obsidian look, kept selectable.
   Same layout, type and glass treatment as the light default; only the
   ground and the accent brightness change. Applied via data-theme="dark"
   on <html> by js/theme.js.
   ========================================================================== */
:root[data-theme="dark"] {
  --color-red: #E5383B;
  --color-red-dark: #BA181B;
  --color-red-ink: #FF7B7D;
  --color-red-glow: rgba(229, 56, 59, 0.35);
  --color-red-tint: rgba(229, 56, 59, 0.12);

  --color-gold: #F4A261;
  --color-gold-bright: #FFB703;
  --color-gold-dark: #D48806;
  --color-gold-ink: #F4A261;
  --color-gold-glow: rgba(244, 162, 97, 0.3);

  --color-green: #4CA83D;
  --color-green-bright: #6FD45C;
  --color-green-dark: #35802A;
  --color-green-ink: #6FD45C;
  --color-green-glow: rgba(76, 168, 61, 0.35);
  --color-green-tint: rgba(76, 168, 61, 0.15);

  --color-bg: #0C0B0E;
  --color-bg-alt: #141219;
  --color-surface: #1B1822;
  --color-surface-card: #201C2A;
  --color-surface-hover: #2B2638;
  --color-line: rgba(255, 255, 255, 0.08);
  --color-line-gold: rgba(244, 162, 97, 0.2);

  --glass-bg: rgba(18, 16, 22, 0.82);
  --glass-bg-card: rgba(32, 28, 42, 0.65);
  --glass-border: rgba(255, 255, 255, 0.12);

  --fill-subtle: rgba(255, 255, 255, 0.05);
  --fill-subtle-hover: rgba(255, 255, 255, 0.12);

  --color-ink: #F8F9FA;
  --color-ink-muted: #CBD5E1;
  --color-ink-soft: #94A3B8;
  --color-ink-invert: #0C0B0E;

  --color-paper: #1A1722;
  --color-paper-shadow: rgba(0, 0, 0, 0.5);

  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 20px 50px rgba(0, 0, 0, 0.5);
}