/* =====================================================================
   100% DANCE · L1 "Studio white": the look of every designed page
   Loaded after each page's own CSS (functions.php). White surfaces, cool pale-grey bands, cool charcoal ink and the four
   logo colours at full brightness. The dark moments (photo heroes, doors, film, credits, footer) are islands: the same
   tokens pinned to a cool charcoal. Decoration carries the logo colour; state (selected tab, progress) carries a 3:1 tone
   of the same hue plus a shape cue; text on a bright fill is ink. The rules at the end point the colour literals that sit
   in the page CSS at these tokens, with the same selectors so specificity matches. Photo scrims stay literal on purpose.
   ===================================================================== */
:root,.phero__card,.band-dark .req,.band-dark .help{
  color-scheme:light;
  --stage:#FFFFFF; --stage-2:#F3F4F6; --stage-3:#FFFFFF; --stage-4:#EAEBEE; --well:#1F2024;
  --light:#151820; --light-2:#2C2F37; --light-3:#43464E;
  --line:rgba(20,24,38,.15); --line-2:rgba(20,24,38,.62);
  --mist:#F1F2F4; --mist-2:#E6E8EB; --paper:#FFFFFF; --ink:#151820; --ink-2:#3C4048;
  --iline:rgba(20,24,38,.15); --iline-2:rgba(20,24,38,.62);
  --err:#861501; --ok:#154F27; --review:#7A311A;
  --scroll-thumb:#A1A5AB;
  --mast-bg:rgba(255,255,255,.95); --mbar-bg:rgba(255,255,255,.97);
  --field-bg:#FFFFFF; --chip-bg:rgba(255,255,255,.75); --chip-bg-hover:#FFFFFF; --fork-bg:rgba(255,255,255,.65); --cls-bg:rgba(255,255,255,.85); --tab-bg:#E6E8EB;
  --wash:rgba(20,24,38,.04); --wash-ghost:rgba(20,24,38,.05); --wash-hover:rgba(20,24,38,.07); --wash-on:rgba(20,24,38,.07); --wash-faint:rgba(20,24,38,.04);
  --btn-hover:#2E313A; --btn-ink-hover:#2E313A;
  --logo-glow:rgba(255,255,255,0); --logo-w-filter:none;
  --ok-line:rgba(17,86,41,.55); --ok-wash:rgba(17,86,41,.1); --ok-wash-2:rgba(17,86,41,.1); --err-wash:rgba(141,29,10,.08); --review-wash:rgba(122,49,26,.1);
  --sel-small:#E6E9F0; --sel-small-lit:#E6E9F0;
  --on-fill:var(--ink);
  --glow-amt:14%; --wash-amt:12%;
  --ac:var(--dot-ac); --pro:var(--dot-pro); --tal:var(--dot-tal); --ent:var(--dot-ent);
  --ac-ui:#C37100; --pro-ui:#8746E8; --tal-ui:#519500; --ent-ui:var(--dot-ent);
}
.phero__card,.band-dark .req,.band-dark .help{color:var(--light);--g-ui:var(--ui)}

/* a line's tones: the deepened --gi of the page CSS is the logo colour here, and --g-ui is the 3:1 state tone (--ui keeps it for the pale card in a dark hero) */
.l-ac{--gi:var(--dot-ac);--ui:var(--ac-ui);--g-ui:var(--ui)}
.l-pro{--gi:var(--dot-pro);--ui:var(--pro-ui);--g-ui:var(--ui)}
.l-tal{--gi:var(--dot-tal);--ui:var(--tal-ui);--g-ui:var(--ui)}
.l-ent{--gi:var(--dot-ent);--ui:var(--ent-ui);--g-ui:var(--ui)}

/* dark moments (islands): the home doors, story, PRO band, credits and footer, the photo hero of a line's page, tags over photos */
:root .hero .doors,
:root .phero,
:root .frame .credit,
:root .person__ph .flag,
:root .foot,
:root .credits,
:root .story,
:root .page-home .pro,
:root .band-dark{
  color:var(--light);color-scheme:dark;
  --stage:#282A2E; --stage-2:#222428; --stage-3:#33353A; --stage-4:#3E4044; --well:#17181B;
  --light:#F8F9FC; --light-2:#E6E8EC; --light-3:#D9DBDF;
  --line:rgba(248,249,252,.20); --line-2:rgba(248,249,252,.52);
  --mist:#F1E8DB; --ink:#14171F; --ink-2:#3C4047;
  --iline:rgba(20,24,38,.14); --iline-2:rgba(20,24,38,.56);
  --err:#FFC4B7; --ok:#A8E2B2; --review:#FFD6CA;
  --scroll-thumb:#616368;
  --mast-bg:rgba(40,42,46,.95); --mbar-bg:rgba(40,42,46,.97);
  --field-bg:rgba(10,12,22,.42); --chip-bg:rgba(10,12,22,.28); --chip-bg-hover:rgba(10,12,22,.5); --fork-bg:rgba(10,12,22,.26); --cls-bg:rgba(10,12,22,.32); --tab-bg:rgba(10,12,22,.55);
  --wash:rgba(248,249,252,.045); --wash-ghost:rgba(248,249,252,.08); --wash-hover:rgba(248,249,252,.10); --wash-on:rgba(248,249,252,.14); --wash-faint:rgba(248,249,252,.045);
  --btn-hover:#FFFFFF; --btn-ink-hover:#3A3F4B;
  --logo-glow:rgba(255,255,255,.14); --logo-w-filter:invert(1);
  --ok-line:rgba(168,226,178,.5); --ok-wash:rgba(168,226,178,.16); --ok-wash-2:rgba(168,226,178,.12); --err-wash:rgba(255,196,183,.12); --review-wash:rgba(255,214,202,.2);
  --sel-small:#393D45; --sel-small-lit:#393D45;
  --on-fill:var(--ink);
  --story-glow:rgba(255,226,190,.07);
  --glow-amt:36%; --wash-amt:32%;
  --g-ui:var(--g);
}

/* a charcoal band on a line page: the island tokens above plus its own ground (before .glow and .wash, which still win for the tinted ones) */
.band-dark{background:var(--stage);color:var(--light)}

/* ---------- colour literals in the page CSS, pointed at the tokens above ---------- */
html{scrollbar-color:var(--scroll-thumb) var(--stage)}

/* actions */
.reel .play .tab{opacity:.85}
.btn:hover,.reel .play:hover{background:var(--btn-hover)}
.btn--ink:hover,.lead--lit .btn:hover{background:var(--btn-ink-hover)}
.btn--ghost:hover{background:var(--wash-ghost)}
.chip{background:var(--chip-bg)}.chip:hover{background:var(--chip-bg-hover)}
.fork{background:var(--fork-bg)}.fork:hover{background:var(--wash)}
.notice-x:hover,.p-close:hover,.tray__rm:hover{background:var(--wash-hover)}

/* masthead, bars, logo */
.mast{background:var(--mast-bg)}
.mbar{background:var(--mbar-bg)}
.logo::before{background:radial-gradient(closest-side,var(--logo-glow),rgba(255,255,255,0))}
.logo .w{filter:var(--logo-w-filter)}

/* forms: the lit (pale) capsule re-points the same tokens, so one rule serves both */
.lead--lit{--field-bg:var(--paper)}
/* owner 2026-11-09: forms felt sterile white. A pale wash of the line's own colour (the same tint the emails use) behind the capsule, white fields on top, and the 6px colour bar stays. */
.lead--lit{background:color-mix(in srgb,var(--gi,var(--ink)) 9%,var(--paper))}
/* owner 2026-11-10: "the party form" wash on every form, not only the lit capsules: Apply for PRO, the Talent card (Apply for representation,
   the information pack, the casting brief), the re-enrolment form and the class request sheet. Each takes its page's line colour (--gi). */
.apply__form,.tform__card,.lead.reenrol,.req{--field-bg:var(--paper);background:color-mix(in srgb,var(--gi,var(--ink)) 9%,var(--paper))}
.tform__card [role=tab][aria-selected=true]{background:transparent}
.tform__card [role=tab]:not([aria-selected=true]){background:color-mix(in srgb,var(--ink) 5%,transparent)}
.opt span,.tt-filters .opt span{background:var(--chip-bg)}
.lead__reflect{background:var(--wash)}
.lead input[type=text],.lead input[type=email],.lead input[type=tel],.lead input[type=url],.lead input[type=date],.lead input[type=number],.lead select,.lead textarea{background-color:var(--field-bg)}
.ok-badge{background:var(--ok-wash)}
.pill--open{box-shadow:inset 0 0 0 1px var(--ok-line)}
.re-empty{background:var(--wash-faint)}
.cls{background:var(--cls-bg)}.cls:has(input:checked){background:var(--wash-on)}
.cls__s,.more__s{background:var(--review-wash);color:var(--review)}
.re-rules.is-bad{background:var(--err-wash)}.re-rules.is-ok{background:var(--ok-wash-2)}
.page-talent .doors [role=tab]{background:var(--tab-bg)}

/* a selected chip's small text sits on the selected fill; text on a bright fill (step numbers, counters, badges) is ink, since white on the logo colours is 2.2 to 2.5:1 */
.opt input:checked+span small{color:var(--sel-small)}
.lead--lit .opt input:checked+span small{color:var(--sel-small-lit)}
.steps>li::before,.year__stages>li::before,.next li::before,.re-h .n,.doors__n,.tray__n{color:var(--on-fill)}

/* a line's colour wash: same gradient, strength is a token */
.glow{background:radial-gradient(ellipse 70% 70% at 82% -14%,color-mix(in oklab,var(--g) var(--glow-amt),transparent) 0%,transparent 64%),var(--stage)}
.tal.glow{background:radial-gradient(ellipse 70% 70% at 16% -14%,color-mix(in oklab,var(--g) var(--glow-amt),transparent) 0%,transparent 64%),var(--stage-3)}
.wash{background:radial-gradient(ellipse 70% 70% at 82% -14%,color-mix(in oklab,var(--g) var(--wash-amt),transparent) 0%,transparent 64%),var(--stage)}
.wash--left{background:radial-gradient(ellipse 70% 70% at 14% -14%,color-mix(in oklab,var(--g) var(--wash-amt),transparent) 0%,transparent 64%),var(--stage-3)}
.rehead{background:radial-gradient(ellipse 70% 90% at 12% -20%,color-mix(in oklab,var(--g) var(--wash-amt),transparent) 0%,transparent 62%),var(--stage)}
.story{background:radial-gradient(ellipse 60% 70% at 72% 10%,var(--story-glow),transparent 70%),var(--stage)}

/* state carries a 3:1 tone and a shape cue */
.tabs [role=tab][aria-selected=true]::after{background:var(--g-ui,var(--g))}
.lit .tabs [role=tab][aria-selected=true]::after{background:var(--g-ui,var(--gi))}
.lead__prog li.is-on::before,.lead__prog li.is-done::before{background:var(--g-ui,var(--g,var(--light)))}
.page-talent .doors [role=tab][aria-selected=true]{box-shadow:inset 0 6px 0 var(--g-ui,var(--g)),inset 1px 0 0 var(--line-2),inset -1px 0 0 var(--line-2)}