/* ── Theme ───────────────────────────────────────────────────────────────
   One place for every colour the site can change.

   The site was written dark, with white hardcoded into ~144 rgba() calls.
   Rather than duplicate all of those per theme, ink and shadow are stored as
   bare RGB triples and composed at use site: rgba(var(--ink-rgb), 0.14). One
   token flip then repaints every hairline, label and scrim at once.

   Dark is the default and the design's home. Light is a genuine second skin,
   not an inversion - inverting would wreck the imagery, which is the actual
   content of a motion studio's site. */

:root {
    color-scheme: dark;

    --ink-rgb: 255, 255, 255;      /* everything drawn on top */
    --shadow-rgb: 0, 0, 0;         /* everything cast below */

    --bg: #030303;
    --panel: rgba(10, 10, 10, 0.58);
    --panel-solid: #0b0b0b;
    --panel-lift: #141414;
    --ink: rgb(var(--ink-rgb));

    /* Logos ship as white marks; light mode needs them black instead. */
    /* Floating chrome: nav pills, dropdowns, popovers. These sit ON the page
       rather than in it, so they need their own ground - the panel token is
       for content surfaces and reads wrong at this scale. */
    --chrome: rgba(8, 8, 10, 0.62);
    --chrome-strong: rgba(10, 10, 12, 0.96);
    --chrome-hair: rgba(255, 255, 255, 0.16);
    /* Scrims that darken media stay dark in both themes: they exist to hold
       white type off a bright frame, which is true either way. */
    --media-scrim: rgba(8, 10, 16, 0.34);

    --logo-filter: brightness(0) invert(1);
    /* Grid lattice, tuned per theme: a light ground needs darker lines to
       read at the same strength. */
    --grid-line: rgba(var(--ink-rgb), 0.20);
    --grid-lit: rgba(var(--ink-rgb), 0.85);
}

:root[data-theme="light"] {
    color-scheme: light;

    --ink-rgb: 18, 18, 20;
    /* Warm rather than neutral black, so shadows sit in the page instead of
       on top of it. */
    --shadow-rgb: 55, 48, 40;

    --bg: #f7f7f5;
    --panel: rgba(255, 255, 255, 0.72);
    --panel-solid: #ffffff;
    --panel-lift: #ffffff;
    --ink: rgb(var(--ink-rgb));

    --chrome: rgba(255, 255, 255, 0.80);
    --chrome-strong: rgba(255, 255, 255, 0.97);
    --chrome-hair: rgba(55, 48, 40, 0.16);
    --media-scrim: rgba(8, 10, 16, 0.34);

    --logo-filter: brightness(0);
    --grid-line: rgba(var(--ink-rgb), 0.22);
    --grid-lit: rgba(var(--ink-rgb), 0.62);
}

/* Elevation reads differently on each ground: a dark page needs deep shadow
   and a bright ring, a light page needs the opposite. */
:root {
    --e1: 0 0 0 var(--hairline, 1px) rgba(var(--ink-rgb), 0.07),
          0 1px 2px rgba(var(--shadow-rgb), 0.40),
          0 4px 10px rgba(var(--shadow-rgb), 0.28);
    --e2: 0 0 0 var(--hairline, 1px) rgba(var(--ink-rgb), 0.11),
          0 2px 4px rgba(var(--shadow-rgb), 0.42),
          0 8px 18px rgba(var(--shadow-rgb), 0.34),
          0 20px 40px rgba(var(--shadow-rgb), 0.28);
}
:root[data-theme="light"] {
    --e1: 0 0 0 var(--hairline, 1px) rgba(var(--shadow-rgb), 0.14),
          0 1px 2px rgba(var(--shadow-rgb), 0.04),
          0 4px 10px rgba(var(--shadow-rgb), 0.05);
    --e2: 0 0 0 var(--hairline, 1px) rgba(var(--shadow-rgb), 0.18),
          0 2px 4px rgba(var(--shadow-rgb), 0.05),
          0 8px 18px rgba(var(--shadow-rgb), 0.07),
          0 20px 40px rgba(var(--shadow-rgb), 0.08);
}

html, body { background: var(--bg); color: var(--ink); }

/* Repaint on switch, but never on first paint - a page that fades in from the
   wrong theme on load is worse than one that simply arrives correct. */
:root.theme-ready,
:root.theme-ready body {
    transition: background-color 0.45s ease, color 0.45s ease;
}

/* ── Toggle ──────────────────────────────────────────────────────────────
   Injected by theme.js so a single file owns the control on every page. */
#theme-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.75rem;
    z-index: 9600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(var(--ink-rgb), 0.14);
    border-radius: 999px;
    background: rgba(var(--shadow-rgb), 0.42);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    color: var(--ink);
    cursor: pointer;
    font-family: 'Alte Haas Grotesk', sans-serif;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1;
    transition: background 0.3s ease, border-color 0.3s ease;
}
:root[data-theme="light"] #theme-toggle {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(var(--shadow-rgb), 0.16);
}
#theme-toggle:hover { border-color: rgba(var(--ink-rgb), 0.3); }
#theme-toggle .tt-glyph {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    /* Half-filled disc: the same mark reads as moon or sun depending on which
       side is lit, so one glyph covers both states. */
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-theme="light"] #theme-toggle .tt-glyph { transform: rotate(180deg); }

@media (max-width: 768px) {
    #theme-toggle { bottom: 1rem; right: 1rem; padding: 0.45rem 0.6rem; }
    #theme-toggle .tt-label { display: none; }
}