/* ================================================================
   LUMIÈRE — Luxury Dining Platform
   base.css · Design tokens, reset, typography, utilities, themes
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS  (Light theme = default)
   ---------------------------------------------------------------- */
:root {
  /* Palette — Ivory · Champagne Gold · Espresso · Beige · Warm White */
  --ivory:        #f7f3ee;
  --warm-white:   #faf7f3;
  --soft-beige:   #ede8e1;
  --champagne:    #d4af37;
  --champagne-lt: #e8cc6a;
  --champagne-dp: #b8942e;
  --espresso:     #1c1410;

  /* Semantic surfaces */
  --bg-primary:   var(--ivory);
  --bg-warm:      #f2ece4;
  --bg-surface:   var(--soft-beige);
  --bg-card:      #ffffff;
  --bg-elevated:  var(--warm-white);
  --bg-invert:    var(--espresso);

  /* Text */
  --text-primary:   #1c1410;
  --text-secondary: #5c524a;
  --text-muted:     #9e948b;
  --text-on-dark:   #f7f3ee;

  /* Gold aliases (kept for continuity with original stylesheet) */
  --gold:       var(--champagne);
  --gold-lt:    var(--champagne-lt);
  --gold-deep:  var(--champagne-dp);
  --gold-glow:  rgba(212, 175, 55, 0.12);
  --gold-glass: rgba(212, 175, 55, 0.06);

  /* Borders & shadows */
  --border-gold:   rgba(212, 175, 55, 0.20);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.10);
  --shadow-card:   rgba(28, 20, 16, 0.06);
  --shadow-lg:     rgba(28, 20, 16, 0.12);
  --nav-bg:        rgba(247, 243, 238, 0.72);
  --nav-bg-solid:  rgba(247, 243, 238, 0.92);
  --overlay-bg:    rgba(247, 243, 238, 0.97);

  /* Easings */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  /* Spacing & rhythm */
  --section-pad: clamp(5rem, 10vw, 9rem);
  --container:   min(92vw, 1280px);
  --container-wide: min(94vw, 1560px);
  --container-narrow: min(90vw, 860px);

  /* Radii */
  --radius-card: 1.5rem;
  --radius-sm:   0.75rem;
  --radius-lg:   2rem;
  --radius-pill: 100px;

  /* Fonts */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;

  --z-cursor: 99999;
  --z-loader: 9500;
  --z-nav:    900;
  --z-overlay: 950;
  --z-modal:  9000;
}

/* ----------------------------------------------------------------
   2. DARK THEME
   ---------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-primary:   #14100c;
  --bg-warm:      #1a1511;
  --bg-surface:   #201a15;
  --bg-card:      #1e1813;
  --bg-elevated:  #241d17;
  --bg-invert:    #0d0a07;

  --text-primary:   #f4ede2;
  --text-secondary: #c3b6a6;
  --text-muted:     #8a7d6e;
  --text-on-dark:   #f4ede2;

  --border-gold:   rgba(212, 175, 55, 0.26);
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --shadow-card:   rgba(0, 0, 0, 0.4);
  --shadow-lg:     rgba(0, 0, 0, 0.55);
  --nav-bg:        rgba(20, 16, 12, 0.72);
  --nav-bg-solid:  rgba(20, 16, 12, 0.92);
  --overlay-bg:    rgba(13, 10, 7, 0.97);
  --gold-glow:     rgba(212, 175, 55, 0.18);
  --gold-glass:    rgba(212, 175, 55, 0.09);
}

[data-theme="dark"] body::before { opacity: 0.5; }

/* Smooth theme cross-fade */
html.theme-ready body,
html.theme-ready .nav,
html.theme-ready .footer,
html.theme-ready .menu-item,
html.theme-ready .card,
html.theme-ready .form-input {
  transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out);
}

/* ----------------------------------------------------------------
   3. RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}

::selection { background: var(--gold); color: #fff; }

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
address { font-style: normal; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.skip-link {
  position: absolute;
  top: -120px; left: 1rem;
  background: var(--espresso);
  color: var(--ivory);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  z-index: var(--z-cursor);
  transition: top 0.3s var(--ease-out);
  font-size: 0.8rem; letter-spacing: 0.1em;
}
.skip-link:focus { top: 1rem; }

/* ----------------------------------------------------------------
   4. GRAIN OVERLAY — subtle paper texture
   ---------------------------------------------------------------- */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 10000;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
  opacity: 0.3;
}

/* ----------------------------------------------------------------
   5. TYPOGRAPHY
   ---------------------------------------------------------------- */
.serif { font-family: var(--font-serif); }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.05; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; font-family: var(--font-sans);
}
.eyebrow::before, .eyebrow::after {
  content: ''; display: block; width: 1.5rem; height: 1px;
  background: var(--gold); opacity: 0.6;
}
.eyebrow--left::before { display: none; }

.gold-text {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

em.accent { font-style: italic; }
h1 em, h2 em, h3 em, .gold-em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----------------------------------------------------------------
   6. LAYOUT HELPERS
   ---------------------------------------------------------------- */
.container { width: var(--container); margin-inline: auto; position: relative; z-index: 2; }
.container-wide { width: var(--container-wide); margin-inline: auto; position: relative; z-index: 2; }
.container-narrow { width: var(--container-narrow); margin-inline: auto; position: relative; z-index: 2; }

.section { padding: var(--section-pad) 0; position: relative; }
.section--warm { background: var(--bg-warm); }
.section--surface { background: var(--bg-surface); }
.section--invert { background: var(--bg-invert); color: var(--text-on-dark); }

.section-header { text-align: center; margin-bottom: 4rem; max-width: 60ch; margin-inline: auto; }
.section-header--left { text-align: left; margin-inline: 0; }
.section-header h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem); margin-top: 1rem; color: var(--text-primary);
}
.section--invert .section-header h2 { color: var(--text-on-dark); }
.section-header p { margin-top: 1rem; color: var(--text-muted); max-width: 52ch; margin-inline: auto; }
.section-header--left p { margin-inline: 0; }

.divider-ornament {
  width: 1px; height: 80px;
  background: linear-gradient(to bottom, transparent, var(--border-gold), transparent);
  flex-shrink: 0;
}
.divider-ornament--sm { height: 40px; align-self: center; }
.divider-ornament--h {
  width: 80px; height: 1px;
  background: linear-gradient(to right, transparent, var(--border-gold), transparent);
}

/* ----------------------------------------------------------------
   7. SCROLL-REVEAL UTILITY
   ---------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ----------------------------------------------------------------
   8. KEYFRAMES
   ---------------------------------------------------------------- */
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes ambientShift {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.05) rotate(1deg); }
  100% { transform: scale(1) rotate(-0.5deg); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%      { opacity: 1;   transform: scaleY(1.15); }
}
@keyframes heroReveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0% 0 0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ----------------------------------------------------------------
   9. ACCESSIBILITY
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}