/* Sarky Italiano Pizza - design tokens shared by the menu and the admin panel. */

:root {
  /* Palette: a candlelit trattoria at night */
  --forno:    #1F1A17;  /* wood-oven charcoal */
  --forno-2:  #2A2420;  /* raised surfaces on dark */
  --forno-3:  #352E29;  /* borders and hover on dark */
  --farina:   #F6EFE4;  /* flour */
  --farina-2: #EFE6D7;  /* raised surfaces on light */
  --farina-3: #E2D6C3;  /* borders on light */
  --pomodoro: #C8321E;  /* tomato: prices, active, primary */
  --pomodoro-dark: #A92814;
  --basilico: #4E6B3A;  /* basil: vegetarian, success */
  --oliva:    #A89B6C;  /* olive oil gold: hairlines, icons */
  --oliva-dark: #7A6F45;
  --cenere:   #8A817A;  /* ash: muted text */
  --white:    #FFFDF9;

  /* Type */
  --font-latin-display: 'Cormorant Garamond', 'Vazirmatn', Georgia, 'Times New Roman', serif;
  --font-latin-body: 'Manrope', 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Vazirmatn', Tahoma, 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--font-latin-display);
  --font-body: var(--font-latin-body);

  /* 1.25 scale: 13 / 16 / 20 / 25 / 31 / 39 / 49 */
  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.5625rem;
  --step-3:  1.9375rem;
  --step-4:  2.4375rem;
  --step-5:  3.0625rem;

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Kurdish and Arabic use Vazirmatn for headings and body. */
[dir="rtl"] {
  --font-display: var(--font-arabic);
  --font-body: var(--font-arabic);
}

*, *::before, *::after { box-sizing: border-box; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] { display: none !important; }

.tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}