/* =========================================================================
   Sapore Restaurant — "Vintage Reserve" fine-dining theme
   Light (parchment / burgundy / gold) + Dark (charcoal / ebony / bronze)
   via CSS custom properties. Tailwind utilities map to these variables
   (see the tailwind.config block in index.html).
   Shape language: sharp (0px radius). Type: Playfair Display + Montserrat.
   ========================================================================= */

/* ---- Light (default) --------------------------------------------------- */
:root,
:root.light {
  --background:                #fbf8f6;
  --surface:                   #fcf9f8;
  --surface-container-lowest:  #ffffff;
  --surface-container-low:     #f6f3f2;
  --surface-container:         #f0eded;
  --surface-container-high:    #eae7e7;

  --on-surface:                #1c1b1b;
  --on-surface-variant:        #5b4d49;
  --heading:                   #4a0e0e; /* burgundy */

  --primary:                   #4a0e0e; /* button / brand fill */
  --on-primary:                #fdf3e3; /* warm cream text on burgundy */

  --gold:                      #8a6a12; /* readable gold for labels/prices */
  --gold-strong:               #c9a23a; /* decorative / hover gold */
  --gold-line:                 rgba(138, 106, 18, 0.45);

  --outline:                   #8a7572;
  --outline-variant:           #e0d2cf;
  --error:                     #ba1a1a;

  --hero-overlay:              rgba(42, 2, 2, 0.55);
  --grain-opacity:             0.045;
}

/* ---- Dark -------------------------------------------------------------- */
:root.dark {
  --background:                #15110f;
  --surface:                   #15110f;
  --surface-container-lowest:  #100c0a;
  --surface-container-low:     #1d1815;
  --surface-container:         #241e1a;
  --surface-container-high:    #2c2521;

  --on-surface:                #ece3dd;
  --on-surface-variant:        #bbaaa1;
  --heading:                   #f2e8e1; /* warm cream headings on charcoal */

  --primary:                   #7a1d1a; /* burgundy fill, readable on charcoal */
  --on-primary:                #fdf3e3;

  --gold:                      #d8b873; /* bronze-gold */
  --gold-strong:               #e3c47e;
  --gold-line:                 rgba(216, 184, 115, 0.40);

  --outline:                   #8a7a72;
  --outline-variant:           #3a302a;
  --error:                     #ffb4ab;

  --hero-overlay:              rgba(18, 7, 7, 0.62);
  --grain-opacity:             0.06;
}

/* ---- Base -------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--on-surface);
  font-family: "Montserrat", system-ui, sans-serif;
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.font-display { font-family: "Playfair Display", Georgia, serif; }

/* Caps utility label (Montserrat, tracked-out) */
.label {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
  line-height: 1;
}

/* ---- Decorative ------------------------------------------------------- */
.luxury-border { border: 1px solid var(--gold-line); }

/* Self-contained film grain (no external assets) */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

/* Hero / fixed image overlays use the burgundy wash */
.brand-overlay { background-color: var(--hero-overlay); }

/* ---- Buttons (sharp, burgundy <-> gold) ------------------------------- */
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  transition: background-color 0.4s ease, color 0.4s ease;
}
.btn-primary:hover { background: var(--gold-strong); color: #2a0a07; }

.btn-outline {
  border: 1px solid var(--gold-line);
  color: var(--heading);
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.btn-outline:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.btn-ghost-light {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  transition: background-color 0.4s ease;
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.12); }

/* ---- Inputs (bottom-border only, gold focus) -------------------------- */
.field {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--outline-variant);
  padding: 0.6rem 0.1rem;
  color: var(--on-surface);
  font-family: "Montserrat", sans-serif;
  outline: none;
  transition: border-color 0.3s ease;
}
.field::placeholder { color: var(--on-surface-variant); opacity: 0.7; }
.field:focus { border-color: var(--gold-strong); }
.field option { color: #1c1b1b; }

/* ---- Nav ---------------------------------------------------------------*/
#site-nav { background-color: color-mix(in srgb, var(--surface) 88%, transparent); }
.nav-scrolled { box-shadow: 0 1px 0 var(--outline-variant), 0 10px 30px rgba(0,0,0,0.10); }

/* Drop cap for the story paragraph */
.dropcap::first-letter {
  font-family: "Playfair Display", serif;
  font-size: 3.4rem;
  line-height: 0.8;
  float: left;
  margin: 0.1em 0.12em 0 0;
  color: var(--heading);
}

/* Language menu */
.lang-menu[hidden] { display: none; }
.lang-option .material-symbols-outlined { opacity: 0; transition: opacity 0.15s ease; }
.lang-option[aria-current="true"] .material-symbols-outlined { opacity: 1; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }

/* Capture helper + reduced motion */
html.capture #home { min-height: 0 !important; height: auto !important; }
html.capture .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}