/* ==========================================================================
   themes.css — five visual directions
   --------------------------------------------------------------------------
   Same markup, same structure, five different temperaments. Each block
   overrides the tokens site.css and system.css already read from, so nothing
   downstream needs to know which theme is active.

   Each is drawn from a reference site, translated rather than copied — the
   palette and typographic logic, not the layout.

     v1 mntra      warm cream / navy / vermilion   Bricolage Grotesque + DM Sans
     v2 podium     sand / black / signal red       Jost + Barlow Condensed
     v3 yakushev   near-white / graphite / slate   Archivo + Inter
     v4 bindery    pastel blocks / warm brown      Fraunces + DM Sans
     v5 olha       bone / near-black / sage        Sofia Sans Condensed + mono
   ========================================================================== */

/* ==========================================================================
   v1 — MNTRA.  The existing palette, unchanged.
   Warm daylight. The grotesque is friendly at display size, which suits films
   about likeable people.
   ========================================================================== */

[data-theme="mntra"] {
  --cream: #FFF5D9;  --cream-deep: #F6E7BF;
  --ink: #182241;    --ink-soft: #2B3557;
  --slate: #536C7C;  --slate-lt: #7B949C;  --slate-dk: #213C4E;
  --hot: #E2542F;    --hot-dk: #C4401D;
  --ink-rgb: 24, 34, 65;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --meta: "DM Mono", ui-monospace, monospace;
}

/* ==========================================================================
   v2 — PODIUM.  Sand ground, black type, one signal red.
   Athletic and declarative: condensed uppercase for anything structural,
   a geometric sans for headlines. The red is used sparingly enough to
   actually mean something.
   ========================================================================== */

[data-theme="podium"] {
  --cream: #E7DFD7;  --cream-deep: #DCD2C7;
  --ink: #0A0A0A;    --ink-soft: #262626;
  --slate: #6B635B;  --slate-lt: #A79C91;  --slate-dk: #171512;
  --hot: #FB2C36;    --hot-dk: #D91824;
  --ink-rgb: 10, 10, 10;
  --display: "Jost", "Futura", "Century Gothic", sans-serif;
  --body: "Jost", "Helvetica Neue", Arial, sans-serif;
  --meta: "Barlow Condensed", "Univers Condensed", sans-serif;
}
[data-theme="podium"] h1,
[data-theme="podium"] h2,
[data-theme="podium"] .film-index__title,
[data-theme="podium"] .tile__title {
  letter-spacing: -0.02em;
  font-weight: 600;
}
/* Structural labels go condensed uppercase — the podium signature. */
[data-theme="podium"] .eyebrow,
[data-theme="podium"] .tile__meta,
[data-theme="podium"] .film-index__meta,
[data-theme="podium"] .roster__head,
[data-theme="podium"] .footer-grid h4,
[data-theme="podium"] .tile__flag {
  font-family: var(--meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
}
[data-theme="podium"] .roster__list { font-family: var(--meta); text-transform: uppercase; letter-spacing: 0.02em; }
[data-theme="podium"] .btn { border-radius: 0; text-transform: uppercase; font-family: var(--meta); letter-spacing: 0.09em; }
[data-theme="podium"] .nav__cta,
[data-theme="podium"] .tile__flag,
[data-theme="podium"] .filter-pill,
[data-theme="podium"] .motion-toggle,
[data-theme="podium"] .theme-switch,
[data-theme="podium"] .theme-switch button { border-radius: 0; }
[data-theme="podium"] .tile__frame { border-radius: 0; }

/* ==========================================================================
   v3 — YAKUSHEV.  Swiss restraint.
   Near-white ground, graphite type, a cool slate accent. Nothing decorative;
   the work supplies all the colour. Tight tracking, generous leading.
   ========================================================================== */

[data-theme="yakushev"] {
  --cream: #FAFAFA;  --cream-deep: #F0F0F0;
  --ink: #141414;    --ink-soft: #3D3D3D;
  --slate: #6D6D6D;  --slate-lt: #A8A8A8;  --slate-dk: #1E2329;
  --hot: #5D6C7B;    --hot-dk: #44515E;
  --ink-rgb: 20, 20, 20;
  --display: "Archivo", "Suisse Int'l", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --meta: "Inter", "Helvetica Neue", Arial, sans-serif;
}
[data-theme="yakushev"] h1,
[data-theme="yakushev"] h2,
[data-theme="yakushev"] h3,
[data-theme="yakushev"] .film-index__title,
[data-theme="yakushev"] .tile__title {
  letter-spacing: -0.035em;
  font-weight: 600;
}
[data-theme="yakushev"] .tile__frame { border-radius: 2px; }
[data-theme="yakushev"] .btn { border-radius: 2px; font-weight: 500; }
[data-theme="yakushev"] .nav__cta { border-radius: 2px; }
/* Service tags, the way the reference labels each project card. */
[data-theme="yakushev"] .tile__meta {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  letter-spacing: 0.02em; text-transform: none; font-size: 0.75rem; font-weight: 500;
}
[data-theme="yakushev"] .tile__meta > span.sep { display: none; }
[data-theme="yakushev"] .tile__flag {
  background: var(--ink); color: var(--cream);
  letter-spacing: 0.02em; text-transform: none; font-weight: 500;
}

/* ==========================================================================
   v4 — BINDERY.  Pastel blocks, warm serif.
   The friendliest of the five, and the closest in spirit to "named after a
   chicken wing." Each band takes its own pastel so the page reads as a set of
   coloured chapters rather than one continuous scroll.
   ========================================================================== */

[data-theme="bindery"] {
  --cream: #FCEED3;  --cream-deep: #F8E3C3;
  --ink: #2A2118;    --ink-soft: #4A3B2A;
  --slate: #8A7A63;  --slate-lt: #B5A78D;  --slate-dk: #3B2F22;
  --hot: #D9614A;    --hot-dk: #BC4A34;
  --ink-rgb: 42, 33, 24;
  --display: "Fraunces", Georgia, serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --meta: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}
[data-theme="bindery"] h1,
[data-theme="bindery"] h2,
[data-theme="bindery"] h3,
[data-theme="bindery"] .film-index__title,
[data-theme="bindery"] .tile__title {
  letter-spacing: -0.015em;
  font-weight: 600;
}
/* Coloured chapters. */
[data-theme="bindery"] .band--ink   { background: #B7BAE5; color: #221F3A; }
[data-theme="bindery"] .band--slate { background: #E6F2E3; color: #1F2E22; }
[data-theme="bindery"] .band--deep  { background: #EEC3D7; color: #35202B; }
[data-theme="bindery"] .site-footer { background: #2A2118; color: #FCEED3; }
[data-theme="bindery"] .band--ink .eyebrow,
[data-theme="bindery"] .band--slate .eyebrow,
[data-theme="bindery"] .band--deep .eyebrow { color: currentColor; opacity: .62; }
[data-theme="bindery"] .band--ink .door {
  background: rgba(255,255,255,.42); border-color: rgba(34,31,58,.22);
}
[data-theme="bindery"] .band--ink .door:hover { background: rgba(255,255,255,.62); }
[data-theme="bindery"] .band--ink .door p,
[data-theme="bindery"] .band--ink .door ul { color: #221F3A; opacity: .82; }
[data-theme="bindery"] .band--ink .stat dd,
[data-theme="bindery"] .band--slate .stat dd,
[data-theme="bindery"] .band--deep .stat dd { color: currentColor; opacity: .7; }
[data-theme="bindery"] .band--slate .roster__head,
[data-theme="bindery"] .band--deep .roster__head { color: currentColor; opacity: .62; }
[data-theme="bindery"] .tile__frame { border-radius: 14px; }
[data-theme="bindery"] .btn, [data-theme="bindery"] .nav__cta { border-radius: 999px; }
[data-theme="bindery"] .split__media img { border-radius: 14px; }

/* ==========================================================================
   v5 — OLHA.  Condensed brutalist editorial.
   Bone ground, near-black type, sage and a pale chartreuse. Condensed display
   set very large against monospace metadata — the most graphic of the five,
   and the one that most makes the films look like exhibits.
   ========================================================================== */

[data-theme="olha"] {
  --cream: #FAFAFA;  --cream-deep: #F9FAE0;
  --ink: #101010;    --ink-soft: #2E2E2E;
  --slate: #606060;  --slate-lt: #908C8C;  --slate-dk: #1A1C19;
  --hot: #101010;    --hot-dk: #000000;
  --ink-rgb: 16, 16, 16;
  --display: "Sofia Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  --body: "Spline Sans Mono", ui-monospace, monospace;
  --meta: "Spline Sans Mono", ui-monospace, monospace;
}
[data-theme="olha"] body { font-size: 0.9375rem; }
[data-theme="olha"] h1,
[data-theme="olha"] h2,
[data-theme="olha"] h3,
[data-theme="olha"] .film-index__title,
[data-theme="olha"] .tile__title {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
[data-theme="olha"] .hero-mark,
[data-theme="olha"] .film-index__title { text-transform: uppercase; }
[data-theme="olha"] .film-index__title { font-size: clamp(2rem, 1rem + 4.4vw, 5rem); }
[data-theme="olha"] .eyebrow,
[data-theme="olha"] .tile__meta,
[data-theme="olha"] .film-index__meta,
[data-theme="olha"] .roster__head,
[data-theme="olha"] .footer-grid h4 { font-family: var(--meta); letter-spacing: 0.06em; }
[data-theme="olha"] .roster__list { font-family: var(--display); text-transform: uppercase; font-weight: 700; }
[data-theme="olha"] .roster__list li:not(:last-child)::after { color: var(--slate-lt); }
[data-theme="olha"] .btn { border-radius: 0; font-family: var(--meta); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8125rem; }
[data-theme="olha"] .nav__cta,
[data-theme="olha"] .tile__flag,
[data-theme="olha"] .motion-toggle,
[data-theme="olha"] .theme-switch,
[data-theme="olha"] .theme-switch button { border-radius: 0; }
[data-theme="olha"] .tile__frame { border-radius: 0; }
[data-theme="olha"] .tile__flag { background: #F9FAE0; color: #101010; box-shadow: none; }
[data-theme="olha"] .band--deep { background: #F9FAE0; }
[data-theme="olha"] .band--slate { background: #C2CABB; color: #101010; }
[data-theme="olha"] .band--slate .eyebrow,
[data-theme="olha"] .band--slate .roster__head { color: #3A4038; }
[data-theme="olha"] .band--slate .quote blockquote { color: #101010; }
[data-theme="olha"] .stat { border-top-color: #101010; }
[data-theme="olha"] .roster__head { border-bottom-color: #101010; }
[data-theme="olha"] .quote { border-left-color: #101010; }

/* ==========================================================================
   Version switcher — prototype chrome, not part of any design
   ========================================================================== */

.version-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(16, 16, 20, .82);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  font-family: ui-sans-serif, system-ui, sans-serif;
  max-width: calc(100vw - 2rem);
  overflow-x: auto;
}
.version-bar a {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #EDEDED;
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}
.version-bar a:hover { background: rgba(255, 255, 255, .12); }
.version-bar a[aria-current="page"] { background: #FAFAFA; color: #101010; }

@media print { .version-bar { display: none; } }