/* =============================================================================
   theme-cinema.css -- Cinema Grill.
   Selected in App.razor for every URL that is NOT under /outtakes/.

   The shared palette, the type scale and every structural rule live in base.css,
   which loads first. This file overrides ONLY what is brand-specific, which after
   the redesign is one thing: the color of the light.

   Cinema Grill's light is the gold of the film strip in the logo -- the warmest
   color in the mark, and the one that reads as a lit marquee against the dark
   blue of the auditorium. The logo's red and royal blue are deliberately NOT used
   as interface colors: the mark already carries three colors, and a page that
   spends all three stops telling anyone where to click.

   Every variable below also exists in theme-outtakes.css. If you add one here, add
   it there, or that half of the site resolves it to nothing.
   ============================================================================= */

:root {
    /* --- the light ---
       --accent is a BACKGROUND color and pairs with --accent-text.
       --accent-ink is the same hue adjusted to be legible as TEXT. On the old light
       theme that meant darkening it; on a dark page it means lifting it. Gold on
       #070b16 lands around 11:1, so small type in it is comfortably readable --
       which is what makes the eyebrow and current-page states possible at all. */
    --accent: #f7b733;
    --accent-hover: #ffc95c;
    --accent-text: #180f00;
    --accent-ink: #f9c15a;
    --accent-glow: rgba(247, 183, 51, 0.22);

    /* Body links take the brand light. A gold-accented page with blue links reads
       as two designs stacked on top of each other. */
    --link: #f9c15a;
    --link-hover: #ffd98c;

    --focus: #f7b733;

    /* The marquee line under the header and at the foot of the hero: brightest in
       the middle, gone at both ends, so it reads as thrown light rather than as a
       border somebody forgot to remove. */
    --marquee-line: linear-gradient(90deg,
        transparent 0%,
        rgba(247, 183, 51, 0.06) 12%,
        rgba(247, 183, 51, 0.55) 50%,
        rgba(247, 183, 51, 0.06) 88%,
        transparent 100%);

    /* --- hero ---
       A deep blue base with the projector wash thrown across it from the top left.
       The wash is what stops a hero with no photograph reading as a flat band --
       worth having, because most of the legacy image library is 2019 event flyers. */
    --hero-bg: #090e1d;
    --hero-wash: radial-gradient(120% 130% at 8% -10%,
        rgba(247, 183, 51, 0.15) 0%,
        rgba(63, 111, 181, 0.13) 38%,
        rgba(7, 11, 22, 0) 72%);
    /* Hero images are chosen by staff and we cannot know what is in them, so the
       scrim has to hold text on a bright frame as well as a dark one. Angled, so
       the right of the photograph survives. */
    --hero-scrim: linear-gradient(100deg,
        rgba(7, 11, 22, 0.94) 0%,
        rgba(7, 11, 22, 0.78) 42%,
        rgba(7, 11, 22, 0.42) 100%);
    --hero-sub-text: var(--text-soft);

    --shadow-btn: 0 2px 12px rgba(247, 183, 51, 0.25);
    --shadow-btn-hover: 0 6px 22px rgba(247, 183, 51, 0.4);
}