/* ============================================================
   Salaama Eats — "Tangerine" light theme (ALTERNATE)

   A bright, warm, cheerful variant in the spirit of the Tangerine
   template: cream backgrounds, dark warm text, tangerine-orange accent.

   This file only OVERRIDES style.css — the dark theme underneath is
   untouched. To go back to the black/gold/red site, delete this one
   line from index.html:

       <link rel="stylesheet" href="theme-light.css">

   The hero keeps its dark photo overlay in both themes, since the
   type sits directly on the photograph.
   ============================================================ */

:root {
  /* surfaces */
  --ivory:      #fdfaf4;   /* page background            */
  --ivory-2:    #f6eee1;   /* alternating section bands  */
  --panel:      #f8f1e6;   /* sections that were charcoal */
  --panel-2:    #fffdf9;   /* cards, forms, map          */
  --showcase-bg: #f8f1e6;  /* must match .showcase's background below */

  /* text */
  --ink:        #241d15;   /* primary text  */
  --muted:      #7d7364;   /* secondary text */

  /* accents — tangerine replaces gold */
  --gold:       #e2822f;
  --gold-light: #f2a65a;
  --red:        #c4452c;
  --red-deep:   #9a3320;
  /* tangerine is too light for small text on cream — this is the readable
     variant used for numerals, labels and fine print */
  --accent-deep: #a85614;

  /* lines, surfaces, depth tuned for a light ground */
  --line:       rgba(36, 29, 21, 0.16);
  --line-light: rgba(226, 130, 47, 0.34);
  --surface:    linear-gradient(165deg, rgba(36, 29, 21, 0.045), rgba(36, 29, 21, 0.015));
  --shadow:     0 22px 50px rgba(78, 55, 30, 0.16), 0 2px 8px rgba(78, 55, 30, 0.06);
}

/* ---------- the hero still sits on a dark photograph ----------
   Everything inside the hero frame keeps cream type, or it would
   disappear into the image. */
.hero-script,
.hero-tagline,
.hero-logo,
.hero-nav-right > a,
.hero-socials a { color: #fdfaf4; }
.hero-sub { color: rgba(253, 250, 244, 0.86); }
.hero-socials a { border-color: rgba(253, 250, 244, 0.4); }
.hero-socials a:hover { background: var(--gold); border-color: var(--gold); color: #3b2408; }
.btn-glass { color: #fdfaf4; border-color: rgba(253, 250, 244, 0.3); }
.btn-glass:hover { background: rgba(12, 10, 8, 0.85); border-color: #fdfaf4; }
.scroll-cue span { background: linear-gradient(180deg, var(--gold-light), transparent); }

/* ---------- sections that were dark ---------- */
.preloader { background: var(--panel); }
.showcase,
.heritage,
.experience,
.reserve,
.site-footer { background: var(--panel); }

.reserve-form,
.visit-map { background: var(--panel-2); }

/* the geometric lattice needs dark ink on a light ground */
.hero-pattern.dark {
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(60deg, rgba(226,130,47,0.14) 0px, rgba(226,130,47,0.14) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(-60deg, rgba(36,29,21,0.07) 0px, rgba(36,29,21,0.07) 1px, transparent 1px, transparent 46px);
}
.hero-pattern:not(.dark) { opacity: 0.4; }

/* ---------- sticky header ---------- */
.site-header {
  background: rgba(253, 250, 244, 0.93);
  border-bottom: 1px solid var(--line);
}
.site-header.scrolled { box-shadow: 0 10px 30px rgba(78, 55, 30, 0.10); }

/* ---------- ".light" modifiers now sit on light ground ---------- */
.eyebrow.light { color: var(--red); }
.ornament.light span,
.ornament.light i { background: var(--gold); }
.section-head.light h2 { color: var(--ink); }

/* ---------- copy that was hard-coded light-on-dark ---------- */
.heritage-copy p,
.exp-card p,
.reserve-copy p { color: var(--muted); }
.heritage-stats span { color: var(--muted); }
.heritage-stats strong { color: var(--accent-deep); }
.exp-card h3,
.reserve-copy h2,
.heritage-copy h2,
.reserve-list li { color: var(--ink); }

/* ---------- form fields ---------- */
.field label { color: var(--red); }
.field input,
.field select,
.field textarea {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
.field input::placeholder,
.field textarea::placeholder { color: #a89d8c; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold); }
.form-status { color: var(--red-deep); }

/* ---------- footer ---------- */
.footer-brand p { color: var(--muted); }
.footer-nav a { color: var(--ink); opacity: 0.75; }
.footer-nav a:hover { color: var(--red); opacity: 1; }
.footer-legal { color: var(--muted); }
.footer-inner { border-bottom-color: var(--line); }

/* ---------- small accent text needs a deeper tangerine on cream ---------- */
.dish-num { color: var(--accent-deep); }
.price { color: var(--red); }

/* ---------- odds and ends ---------- */
.testi-dots button { background: rgba(36, 29, 21, 0.18); }
.testi-dots button.active { background: var(--red); }
.exp-card { border-color: var(--line); }
.exp-card:hover { border-color: var(--gold); }
.menu-panel li { border-bottom-color: var(--line); }
.heritage-stats { border-top-color: var(--line); }
.reserve-list li { border-bottom-color: var(--line); }
.btn-gold { color: #3b2408; }
.tab-btn.active { color: #3b2408; }
.fab { color: #3b2408; }
.visit-map iframe { filter: none; }

/* the mobile drop-down nav sits on the light header */
@media (max-width: 860px) {
  .main-nav.open { background: var(--ivory); }
}