/* RESTAURANT — warm dining theme (Benihana-style). Vivid brand red (#ed1b24).
   LIGHT mode = warm charcoal table; DARK mode = NEUTRAL near-black (no red tint
   in the surfaces) with the true Benihana red as the only accent, so the photos
   pop and the room just dims to black.

   Design rule that the first version broke: RED IS AN ACCENT ON DARK SURFACES
   ONLY. Headings, icons, CTAs and frames are red; body text is warm off-white;
   surfaces are charcoal (light) / neutral black (dark). The footer + prepaid
   surfaces are DARK with red text/border — never a red fill behind red text.

   The warm-tinted surfaces below are correct for LIGHT mode. In DARK mode the
   `body.mode-dark` block at the bottom of this file overrides the shared surface
   vars to NEUTRAL near-black (de-redding them) and pushes the accents to the
   exact Benihana red — so light mode stays warm and dark mode reads as black. */

:root {
    /* Body text — warm off-white, legible on dark in BOTH modes */
    --font-color: rgba(237, 232, 227, 1);        /* light-mode primary */
    --font-light-color: rgba(184, 177, 170, 1);  /* muted/secondary (dates, counts) */
    --font-dark-color: rgba(237, 232, 227, 1);   /* dark-mode primary */

    /* Headings — the true Benihana red #ed1b24, same in both modes */
    --heading-color: rgba(237, 27, 36, 1);
    --heading-light-color: rgba(237, 27, 36, 1);
    --heading-dark-color: rgba(237, 27, 36, 1);

    /* Icons mirror headings */
    --icon-color: rgba(237, 27, 36, 1);
    --icon-light-color: rgba(237, 27, 36, 1);
    --icon-dark-color: rgba(237, 27, 36, 1);

    /* Surfaces — warm charcoal (light mode) -> near-black (dark mode) */
    --bg-color: rgba(23, 20, 20, 1);             /* light-mode page / card */
    --bg-light-color: rgba(18, 16, 16, 1);       /* light-mode container */
    --bg-dark-color: rgba(12, 12, 13, 1);        /* dark-mode page / card — neutral near-black */

    --bg-light-secondary: rgba(38, 33, 33, 1);   /* light-mode elevated / selected */
    --bg-dark-secondary: rgba(24, 24, 27, 1);    /* dark-mode elevated / card — neutral */

    /* Accent / CTA — true Benihana red #ed1b24; buttons render WHITE text on top.
       light = brighter hover, dark = darker pressed. */
    --accent-orange: rgba(237, 27, 36, 1);
    --accent-light-orange: rgba(244, 62, 68, 1);
    --accent-dark-orange: rgba(190, 20, 28, 1);

    /* Success / "included for $0" — clean dining green */
    --accent-green: rgba(34, 150, 95, 1);
    --accent-light-green: rgba(46, 178, 116, 1);
    --accent-dark-green: rgba(24, 110, 70, 1);

    /* Cart surfaces — dark, slightly warm */
    --cart-grey: rgba(46, 41, 41, 1);
    /* This theme ships a DARK cart pill, so the label must be light — without
       this the count/word inherit the page font colour and vanish into it. */
    --cart-font-color: var(--font-white);
    --cart-light-grey: rgba(60, 54, 54, 1);
    --cart-dark-grey: rgba(22, 22, 25, 1);

    --accessibility-blue: rgba(64, 150, 224, 1);

    --shadow-color: rgba(0, 0, 0, 0.55);

    /* Prepaid pill + footer bar — DARK surface with red text/border.
       (Was a pure-red fill, which made the "Products" bar red-on-red.) */
    --prepaid-background-color: rgba(30, 20, 20, 1);
    --prepaid-border-color: rgba(237, 27, 36, 1);
    --prepaid-font-color: rgba(237, 27, 36, 1);
    --prepaid-icon-color: rgba(237, 27, 36, 1);

    --font-green: rgba(46, 178, 116, 1);
    --font-blue: rgba(96, 168, 230, 1);
    --font-white: rgba(245, 242, 238, 1);

    --soft-shadow: rgba(0, 0, 0, 0.5);

    --photo-border-color: rgba(237, 27, 36, 1);       /* red frame, light mode — #ed1b24 */
    --photo-border-dark-color: rgba(237, 27, 36, 1);  /* red frame, dark mode — Benihana red #ed1b24 */

    /* --- Modern surface set (lightbox / cart / dialog / overlays). style.css
       references these throughout — several with NO inline fallback — so without
       them those surfaces render transparent/broken. Defined here in the theme's
       own warm-dark palette so they actually paint. */
    --overlay-bg: rgba(20, 17, 17, 0.97);
    --overlay-bg-secondary: rgba(30, 26, 26, 1);
    --overlay-text: rgba(237, 232, 227, 1);
    --overlay-text-muted: rgba(178, 170, 164, 1);
    --overlay-border: rgba(78, 60, 60, 1);

    --danger-color: rgba(208, 52, 50, 1);
    --danger-color-hover: rgba(228, 72, 68, 1);
    --warning-color: rgba(214, 158, 64, 1);

    --surface-elevated-dark: rgba(18, 18, 21, 1);  /* neutral */

    --pulse-glow: rgba(237, 27, 36, 0.55);
    --social-glow: rgba(237, 27, 36, 0.6);
}

/* DARK MODE = neutral black, Benihana red accent only.
   The vars above are SHARED between light + dark (used unscoped in style.css), so
   their warm/red-tinted values are right for LIGHT mode but leak red into dark.
   Re-defining them on `body.mode-dark` shadows the :root values for descendants
   in dark mode ONLY (light mode keeps the warm :root values) — so this de-reds
   every shared surface in dark mode without touching light mode. */
body.mode-dark {
    /* Elevated / card surfaces used UNSCOPED (configurator cards, FAQ tiles,
       download-photo section, gallery-choice cards, also --card-bg/--bg-secondary
       which alias this) — neutral near-black instead of warm charcoal. */
    --bg-light-secondary: rgba(24, 24, 27, 1);

    /* Cart surfaces (unscoped grey) — neutral. */
    --cart-grey: rgba(30, 30, 33, 1);
    --cart-light-grey: rgba(42, 42, 46, 1);

    /* Prepaid pill + footer "Products" bar — neutral-black surface (the red
       text/border/icon already come from :root's Benihana red, in both modes;
       only the SURFACE needs de-redding here). */
    --prepaid-background-color: rgba(20, 20, 23, 1);

    /* Lightbox / cart / dialog overlays — neutral dark. */
    --overlay-bg: rgba(16, 16, 19, 0.97);
    --overlay-bg-secondary: rgba(28, 28, 32, 1);
    --overlay-border: rgba(58, 58, 64, 1);
}