/* ============================================================
   CUSTOM — Per-store overrides for Craze Pizza & Cake | Cravours By Craze
   DARK THEME: near-black surfaces + gold (#fac564) accent.
   Loaded LAST (after global.css, theme.css, style.css) so these
   token + selector overrides win. Re-skins the whole site by
   redefining the theme tokens; a few targeted rules fix spots
   where a token was used as visible text/border or a surface was
   hardcoded light in style.css.
   ============================================================ */

:root {
  /* ===== BACKGROUNDS — near-black, warm dark to blend with the black navbar ===== */
  --gs-bg:            #0c0c0c;   /* page background */
  --gs-bg-alt:        #141210;   /* alternating sections */
  --gs-cream:         #191713;   /* card / panel surfaces */

  /* ===== TEXT — light on dark ===== */
  --gs-dark:          #f6f0e2;   /* headings */
  --gs-text:          #dcd6ca;   /* body text */
  --gs-text-light:    #a49d8d;   /* muted / secondary */

  /* ===== PRIMARY — repurposed as dark elevated surfaces (mostly button/panel bg) ===== */
  --gs-primary:       #302b21;
  --gs-primary-dark:  #221f18;
  --gs-primary-deep:  #0a0a0a;
  --gs-primary-light: rgba(250, 197, 100, 0.08);

  /* ===== ACCENT — brand gold ===== */
  --gs-accent:        #fac564;
  --gs-accent-bright: #ffd98c;   /* brighter gold on dark surfaces */
  --gs-accent-dark:   #e0a63f;   /* deeper gold (hover) */
  --gs-accent-light:  rgba(250, 197, 100, 0.14);

  /* ===== BORDERS ===== */
  --gs-border:        rgba(250, 197, 100, 0.16);
  --gs-border-light:  rgba(255, 255, 255, 0.07);
  --gs-border-gold:   rgba(250, 197, 100, 0.42);

  /* ===== ON-DARK TEXT (surfaces that were already dark) ===== */
  --gs-dark-text:       #dcd6ca;
  --gs-dark-text-soft:  #a49d8d;
  --gs-dark-heading:    #f6f0e2;
  --gs-dark-border:     rgba(250, 197, 100, 0.24);

  /* ===== SHADOWS — deepened for dark surfaces ===== */
  --gs-shadow:       0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 34px rgba(0, 0, 0, 0.55);
  --gs-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.55), 0 24px 54px rgba(0, 0, 0, 0.7);
  --gs-shadow-gold:  0 10px 30px rgba(250, 197, 100, 0.28);

  /* ===== HERO — darker overlay for legibility over photos ===== */
  --gs-hero-overlay: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.55) 45%,
      rgba(0, 0, 0, 0.86) 100%
    );

  /* ===== NAVBAR ===== */
  --gs-nav-bg:        #000000;
  --gs-nav-open-bg:   #000000;

  /* ===== FOOTER ===== */
  --gs-footer-bg:     #0a0a0a;
  --gs-footer-bar-bg: #000000;
  --gs-footer-text:   #a49d8d;

  /* ===== BRAND GLOW — gold ===== */
  --gs-glow:      rgba(250, 197, 100, 0.32);
  --gs-glow-dark: rgba(250, 197, 100, 0.40);
  --gs-glow-soft: rgba(250, 197, 100, 0.22);

  /* ===== DECORATIVE ===== */
  --gs-star-color:       #fac564;
  --gs-faq-section-bg:   #0c0c0c;
  --gs-faq-container-bg: #16130f;

  /* ===== BACKWARD COMPATIBILITY (legacy variable names) ===== */
  --primary-color:        #302b21;
  --primary-color-light:  #0c0c0c;
  --primary-color-dark:   #000000;
  --text-dark:            #f6f0e2;
  --text-light:           #a49d8d;
  --main-color:           #fac564;
  --bg-shade:             #141210;
}

/* ------------------------------------------------------------
   Targeted fixes: spots where a token was used as visible TEXT
   or a hairline BORDER (navy → invisible on dark) — recolor gold.
   ------------------------------------------------------------ */

/* Section toppers / eyebrow labels */
.cs-topper { color: var(--gs-accent); }

/* Outline buttons: gold text + gold hairline (was navy, invisible on dark) */
.gs-btn-outline,
.location-card-btn,
.btn-directions {
  color: var(--gs-accent);
  border-color: var(--gs-border-gold);
}

/* Inline text-link hover → bright gold */
.gs-inline-link:hover,
.link-primary-light:hover {
  color: var(--gs-accent-bright);
  text-decoration-color: var(--gs-accent-bright);
}

/* Dish-detail chips → gold text on the dark card */
.gs-dish-detail { color: var(--gs-accent); }

/* Menu category buttons, active underline bars and item price → gold */
.active-button,
.item-price { color: var(--gs-accent); }
.menu-button::after,
.active-button:after { background: var(--gs-accent); }
.category-header { color: var(--gs-accent-bright); }

/* ------------------------------------------------------------
   Surfaces hardcoded light in style.css → dark cards/panels.
   ------------------------------------------------------------ */
.menu-item,
.menu-buttons { background: var(--gs-cream); }

.mobile-menu-controls { background: rgba(20, 18, 14, 0.96); }

/* Dish carousel arrows: dark surface with a gold glyph */
.gs-dishes-nav {
  background: var(--gs-cream);
  color: var(--gs-accent);
}

/* "View Full Menu" CTA: solid gold — a dark button would vanish on the dark page */
.menu-btn-wrapper a {
  background-color: var(--gs-accent);
  border-color: var(--gs-accent);
  color: #14252c;
}
.menu-btn-wrapper a:hover {
  background-color: var(--gs-accent-dark);
  border-color: var(--gs-accent-dark);
  color: #14252c;
}