/* === Restaurant V2 Design System === */
/* Auto-generated from restaurant.ts theme. Don't edit manually. */

:root {
  /* Backgrounds */
  --bg-deep: #1a120a;
  --bg-cream: #fbf6ed;
  --bg-slate: #1c1c1a;
  --bg-wood-frame: #3a2820;

  /* Texts */
  --text-on-dark: #fbf6ed;
  --text-on-light: #1a120a;
  --text-muted-dark: #d4a574;
  --text-muted-light: #6b5544;

  /* Accents */
  --primary: #7c1d2e;
  --primary-hover: #6e1a1f;
  --accent: #c4a060;
  --accent-warm: #c2724b;

  /* Utility */
  --border: rgba(250, 246, 237, 0.12);
  --border-light: rgba(26, 18, 10, 0.1);
  --shadow-warm: 0 24px 60px -20px rgba(26, 18, 10, 0.4);

  /* Fonts */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-display-sc: 'Playfair Display SC', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-chalk: 'Caveat', cursive;

  /* Type scale */
  --text-hero: clamp(56px, 7.5vw, 112px);
  --text-poster: clamp(38px, 4vw, 64px);
  --text-h2: clamp(32px, 3.5vw, 48px);
  --text-h3: clamp(22px, 2vw, 32px);
  --text-quote: clamp(20px, 1.8vw, 26px);
  --text-body: clamp(15px, 1.1vw, 17px);
  --text-eyebrow: clamp(10px, 0.9vw, 12px);

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-eyebrow: 0.18em;
  --ls-small-caps: 0.15em;

  /* Spacing */
  --section-pad-y: clamp(80px, 10vw, 160px);
  --container-pad-x: clamp(20px, 4vw, 64px);
  --container-max: 1240px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain texture utility — apply via .grain ou data-grain */
.grain::before,
[data-grain]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.04  0 0 0 0 0.02  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: 0.04;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* Reveals */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: var(--text-on-dark);
  padding: 8px 16px;
  z-index: 9999;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* Focus visible globally */
:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Reduced motion */
@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;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}