/* ==========================================================================
   TheatresDB brand layer (v11.68)
   Loaded after style.css / cinelog.css so it can retune the whole theme
   from one place.

   Direction
   - Amber accent on a cool near-black base. Amber = anything you can act on.
   - Blue is reserved for "premium" screens/formats so the two never clash.
   - IBM Plex Sans for text, IBM Plex Mono for small spec labels.
   - All fonts are self-hosted (no Google Fonts request). Tamil falls back to
     Noto Sans Tamil, which only downloads when Tamil text is on the page.
   ========================================================================== */

/* ── Fonts (self-hosted, latin subset) ─────────────────────────────────── */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Sans Tamil';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC;src:url(../fonts/noto-sans-tamil-tamil-400-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Sans Tamil';font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC;src:url(../fonts/noto-sans-tamil-tamil-600-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Sans Tamil';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC;src:url(../fonts/noto-sans-tamil-tamil-700-normal.woff2) format('woff2')}

/* ── Tokens: dark (default) ────────────────────────────────────────────── */
:root:not([data-theme=light]),
[data-theme=dark]{
    --gold:#F4C24B;
    --gold-lt:#FFD97A;
    --gold-dk:#C99A2E;
    --gold-dark:#C99A2E;
    --on-gold:#17130a;

    --premium:#4DB3F0;
    --premium-dk:#1673AE;
    --premium-amber:var(--premium);
    --premium-amber-dk:var(--premium-dk);

    --bg:#0f1316;
    --bg-card:#161b1f;
    --bg-card2:#222a30;
    --bg-modal:#161b1f;
    --border:#2b343b;
    --border-hi:#5d6a73;
    --text:#f1efe9;
    --text-muted:#9aa4ac;
    --text-dim:#6b767f;
    --white:#f1efe9;
    --on-dark:#f1efe9;
    --hdr-bg:rgba(15,19,22,.92);
    --input-bg:#222a30;
    --toggle-bg:#222a30;
    --toggle-knob:#F4C24B;
    --tk-accent:#F4C24B;

    --font-body:'IBM Plex Sans','Noto Sans Tamil',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-display:var(--font-body);
    --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

/* ── Tokens: light ─────────────────────────────────────────────────────────
   Light mode uses a deeper amber so links and buttons keep AA contrast on
   cream (#946200 on #f3efe6 ≈ 5:1, white on #946200 ≈ 5.9:1).               */
[data-theme=light]{
    --gold:#946200;
    --gold-lt:#B07800;
    --gold-dk:#6B4600;
    --gold-dark:#6B4600;
    --on-gold:#ffffff;

    --premium:#1673AE;
    --premium-dk:#0E5282;
    --premium-amber:var(--premium);
    --premium-amber-dk:var(--premium-dk);

    --toggle-knob:#946200;
    --tk-accent:#946200;
}

/* ── Type ──────────────────────────────────────────────────────────────── */
html{font-synthesis:none}
body{font-family:var(--font-body);font-feature-settings:'tnum' 0}
h1,h2,h3,h4,h5,h6{font-family:var(--font-body);font-weight:700;letter-spacing:-.025em}
h1{letter-spacing:-.035em}
.hero h1{font-weight:700;letter-spacing:-.035em;line-height:1.08}
.hero h1 em{font-style:normal}
code,kbd,samp,pre,.mono{font-family:var(--font-mono)}
.card-spec-val,.th-stat-num,.hero-stat-num{font-variant-numeric:tabular-nums}

/* ── Actions: flat amber, dark ink ─────────────────────────────────────────
   The global transform already swapped white text for var(--on-gold); these
   rules remove leftover glows/gradients and give buttons one consistent feel. */
.btn-primary,
.htmap-btn-primary,
.cl-primary-btn,
.hdr-logvisit-btn,
.th-btn-bms{
    background:var(--gold);
    color:var(--on-gold);
    box-shadow:none;
}
.btn-primary:hover,
.htmap-btn-primary:hover,
.cl-primary-btn:hover,
.hdr-logvisit-btn:hover,
.th-btn-bms:hover{
    background:var(--gold-lt);
    color:var(--on-gold);
    filter:none;
    box-shadow:0 8px 24px rgba(244,194,75,.22);
}
[data-theme=light] .btn-primary:hover,
[data-theme=light] .htmap-btn-primary:hover,
[data-theme=light] .cl-primary-btn:hover,
[data-theme=light] .hdr-logvisit-btn:hover,
[data-theme=light] .th-btn-bms:hover{box-shadow:0 8px 24px rgba(148,98,0,.25)}

.filter-chip.active,
.htmap-chip-active,
.htspec-chip-active{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.filter-chip.active:hover,
.htmap-chip-active:hover,
.htspec-chip-active:hover{background:var(--gold-lt);color:var(--on-gold)}

.hdr-logo-box,
.footer-logo-box{background:var(--gold);color:var(--on-gold)}

/* ── Atmosphere ────────────────────────────────────────────────────────── */
.hero-glow-1{background:rgba(244,194,75,.14)}
[data-theme=light] .hero-glow-1{background:rgba(201,154,46,.16)}
.hero-glow-2{background:color-mix(in srgb,var(--premium) 40%,transparent);opacity:.4}
.hero-eyebrow{font-family:var(--font-mono);font-weight:500;color:var(--text-muted)}

/* ── Cards, pills and inputs: slightly softer, more consistent ─────────── */
.theater-card:hover,
.blog-card:hover{border-color:rgba(244,194,75,.4)}
[data-theme=light] .theater-card:hover,
[data-theme=light] .blog-card:hover{border-color:rgba(148,98,0,.4)}
input:focus,select:focus,textarea:focus,
#theater-search:focus,
#htspec-search-input:focus,
#htcomp-search-input:focus{border-color:var(--gold)}
:focus-visible{outline-color:var(--gold)}

/* ── Premium = blue everywhere (badges, rows, tags) ───────────────────── */
.badge-imax,
.badge-premium{background:var(--premium);color:#06121c}
[data-theme=light] .badge-imax,
[data-theme=light] .badge-premium{color:#fff}

/* ── Selection and scrollbars pick up the accent ──────────────────────── */
::selection{background:rgba(244,194,75,.32);color:inherit}

/* ── Section titles: heavier, tighter (inline template CSS loads later) ─ */
.th-section-title,
.ht-section-title{font-weight:600!important;letter-spacing:-.02em!important}

/* "Not listed" must stay readable on cream */
.th-sx-nil{color:var(--sx-mute)}