/* ==========================================================================
   Third Attractor — the light reading surface
   ==========================================================================
   Only the --ta-* aliases move. The theme.json presets are left alone, so
   anything carrying a palette class (the top bar, the header, the footer)
   keeps the colour an author chose for it, and the Styles panel keeps working.

   The design is deliberately not an inversion: the chrome and the picture
   heroes stay dark — they are the brand, and a photograph under a pale veil
   loses what it was chosen for — while everything that is read at length
   turns to paper. Those dark islands therefore take the dark tokens back,
   or their light text would land on their own dark ground.

   Contrast targets: 4.5:1 for body copy, 3:1 for large text and controls.
   ========================================================================== */

:root[data-theme="light"] {
	/* Grounds */
	--ta-void: #F4F1EA;
	--ta-void-2: #E9E4D9;
	--ta-surface: #FFFFFF;
	--ta-plate-ground: #DDD8CE;
	--ta-player-ground: #FFFFFF;

	/* The ink. Everything mixed "from the foreground" follows this one value:
	   glass, edges, tracks and hairlines all flip with it. */
	--ta-cream: #16212B;
	--ta-body-1: #2B3742;
	--ta-body-2: #46525E;
	--ta-mist: #33474F;
	--ta-muted: #56636F;
	--ta-line: color-mix(in srgb, #16212B 18%, transparent);

	/* Accents, darkened to carry text on paper. The dark values are far too
	   pale here: aqua on white measures 1.6:1. */
	--ta-aqua: #00707A;
	--ta-teal-glow: #0E7C78;
	--ta-teal-ice: #0B6570;
	/* 5.6:1 on paper; #8A6A22 measured 4.47 on the tinted plate grounds. */
	--ta-gold: #7F6220;
	--ta-gold-line: #7F6220;
	/* Kept bright: this one is a BACKGROUND under dark text, not a text colour. */
	--ta-gold-sun: #D9BC72;

	/* The stances, same order, re-weighted for a pale ground. */
	--ta-stance-embraces: #0E7C78;
	--ta-stance-qualifies: #35757B;
	/* 4.85:1 under white — the previous #9A7C2E measured 3.96 in the tally chip. */
	--ta-stance-reframes: #8A6E22;
	--ta-stance-contests: #B33A56;
	--ta-stance-none: #C4CAD1;

	--ta-shadow: color-mix(in srgb, #16212B 14%, transparent);
	color-scheme: light;
}

/* The islands that keep their dark ground, and therefore their light ink. */
:root[data-theme="light"] .ta-topbar,
:root[data-theme="light"] .ta-header,
:root[data-theme="light"] .ta-footer,
:root[data-theme="light"] .ta-hero,
:root[data-theme="light"] .ta-about-hero,
:root[data-theme="light"] .ta-plates .wp-block-post,
:root[data-theme="light"] .ta-plate-single .wp-block-post {
	--ta-void: #06131F;
	--ta-void-2: #0B1F33;
	--ta-surface: rgba(255, 255, 255, 0.05);
	--ta-plate-ground: #000000;
	--ta-player-ground: color-mix(in srgb, #06131F 60%, transparent);
	--ta-cream: #F8F8F8;
	--ta-body-1: #DCE6EC;
	--ta-body-2: #B9C6D0;
	--ta-mist: #CFE3E6;
	--ta-muted: #9AA6B2;
	--ta-line: rgba(248, 248, 248, 0.14);
	--ta-aqua: #00FFFF;
	--ta-teal-glow: #1FB5B0;
	--ta-teal-ice: #9FE3E0;
	--ta-gold: #E9CF94;
	--ta-gold-line: #C9A961;
	--ta-gold-sun: #E9CF94;
	--ta-stance-embraces: #1FB5B0;
	--ta-stance-qualifies: #9FE3E0;
	--ta-stance-reframes: #E9CF94;
	--ta-stance-contests: #E0708A;
	--ta-stance-none: #3C4A57;
	--ta-shadow: color-mix(in srgb, #000000 45%, transparent);
	color-scheme: dark;
	/* Not only the variables: the body's ink cascades into these dark grounds,
	   so anything inheriting its colour — the footer's site title, its lists —
	   would arrive here as dark-on-dark. */
	color: #DCE6EC;
}

/* The page ground itself. theme.json paints the body from the `base` preset,
   which the aliases above cannot reach. */
:root[data-theme="light"] body {
	background-color: var(--ta-void);
	color: var(--ta-body-1);
}
:root[data-theme="light"] .wp-site-blocks { background-color: var(--ta-void); }

/* Headings and prose come from theme.json's `main`, near-white by design. */
:root[data-theme="light"] .wp-block-post-content,
:root[data-theme="light"] .ta-prose,
:root[data-theme="light"] main :where(h1, h2, h3, h4, h5, h6) { color: var(--ta-cream); }
:root[data-theme="light"] .ta-hero :where(h1, h2, h3),
:root[data-theme="light"] .ta-about-hero :where(h1, h2, h3) { color: var(--ta-cream); }

/* Preset-coloured text set for a dark ground: on paper these read as fog.
   WordPress prints its palette classes with `!important`, so an override has
   to answer in kind — without it these rules simply never applied. */
:root[data-theme="light"] main .has-main-soft-color { color: var(--ta-body-1) !important; }
:root[data-theme="light"] main .has-main-accent-color { color: var(--ta-body-2) !important; }
:root[data-theme="light"] main .has-cream-color { color: var(--ta-cream) !important; }
:root[data-theme="light"] main .has-teal-ice-color { color: var(--ta-teal-ice) !important; }
:root[data-theme="light"] main .has-aqua-color { color: var(--ta-aqua) !important; }
:root[data-theme="light"] main .has-muted-color,
:root[data-theme="light"] main .has-secondary-color { color: var(--ta-muted) !important; }
/* …except inside the islands, where the presets were right all along. */
:root[data-theme="light"] .ta-hero .has-main-soft-color,
:root[data-theme="light"] .ta-about-hero .has-main-soft-color { color: #DCE6EC !important; }
:root[data-theme="light"] .ta-hero .has-cream-color,
:root[data-theme="light"] .ta-about-hero .has-cream-color { color: #F8F8F8 !important; }
:root[data-theme="light"] .ta-hero .has-teal-ice-color,
:root[data-theme="light"] .ta-about-hero .has-teal-ice-color { color: #9FE3E0 !important; }
:root[data-theme="light"] .ta-hero .has-aqua-color,
:root[data-theme="light"] .ta-about-hero .has-aqua-color { color: #00FFFF !important; }

/* Surfaces that were written as a translucent white veil over a dark page. */
:root[data-theme="light"] main .has-surface-background-color { background-color: var(--ta-surface) !important; }
:root[data-theme="light"] main .has-void-2-background-color:not(.ta-header):not(.ta-footer) { background-color: var(--ta-void-2) !important; }

/* Cards gain a hairline and a shadow instead of a lighter fill: on paper the
   5 % white veil that separated them from the page is invisible. */
:root[data-theme="light"] .ta-ep,
:root[data-theme="light"] .ta-iq,
:root[data-theme="light"] .ta-pr,
:root[data-theme="light"] .ta-pred,
:root[data-theme="light"] .ta-event,
:root[data-theme="light"] .ta-band,
:root[data-theme="light"] .ta-step,
:root[data-theme="light"] .ta-chart,
:root[data-theme="light"] .ta-sched__list li {
	background: var(--ta-surface);
	box-shadow: 0 1px 2px var(--ta-shadow);
}

/* theme.json paints every link with the `aqua` preset, cyan by design — 1.1:1
   on paper. The islands keep it; the reading surface takes the darkened one. */
:root[data-theme="light"] main a,
:root[data-theme="light"] .wp-block-post-content a { color: var(--ta-aqua); }
:root[data-theme="light"] .ta-hero a,
:root[data-theme="light"] .ta-about-hero a,
:root[data-theme="light"] .ta-plates a,
:root[data-theme="light"] .ta-plate-single a { color: #00FFFF; }

/* Series tags carry their own hue, chosen for a dark page. Rather than pick a
   second colour for each of the nine, each is darkened towards the ink — the
   series stays recognisable and the label becomes readable.

   58 % laissait passer le cyan #00FFFF de « The Inside Job » : 3.13:1 sur le
   blanc des cartes. C'est la couleur la plus claire des neuf, donc c'est elle
   qui fixe le taux. À 44 % elle mesure 4.55:1 et l'or, le plus sombre du lot,
   reste à 5.12:1 — toute la famille passe. */
:root[data-theme="light"] main .ta-stag { color: color-mix(in srgb, var(--ta-c, #008080) 44%, #16212B); }
:root[data-theme="light"] .ta-hero .ta-stag,
:root[data-theme="light"] .ta-about-hero .ta-stag { color: var(--ta-c, #008080); }

/* The figures use the bright gold kept for button grounds; as text on paper
   they need the darkened one. */
:root[data-theme="light"] main .ta-stat b { color: var(--ta-gold); }

/* The chips are coloured `var(--ta-c, var(--ta-aqua))`. A custom property used
   inside another one's FALLBACK is not re-resolved when that fallback changes:
   measured here, --ta-aqua reads #00707A on the element while the colour stays
   cyan. Each case is therefore stated outright — the plain chip from the token,
   the series chips from their own hue, darkened like their tags. */
:root[data-theme="light"] main .ta-chip:hover,
:root[data-theme="light"] main .ta-chip[aria-pressed="true"] { color: var(--ta-aqua); }
:root[data-theme="light"] main .ta-chip[style*="--ta-c"]:hover,
:root[data-theme="light"] main .ta-chip[style*="--ta-c"][aria-pressed="true"] {
	color: color-mix(in srgb, var(--ta-c) 44%, #16212B);
}

/* The series swatches carry the same hues as the tags, and the same problem. */
:root[data-theme="light"] main .ta-sr i,
:root[data-theme="light"] main .ta-sr__dot { color: color-mix(in srgb, var(--ta-c, #008080) 44%, #16212B); }

/* The small tally chips print their figure in the page ground, which reads as
   "the darkest thing available" on a dark site. Here that ground is paper, so
   the figure would sit at 3.5:1 on its own colour band — it takes white, which
   every darkened stance carries above 4.5:1. */
:root[data-theme="light"] main .ta-pr__legend b,
:root[data-theme="light"] main .ta-iq__legend b,
:root[data-theme="light"] main .ta-sched__flag { color: #FFFFFF; }
:root[data-theme="light"] main .ta-iq__legend .is-not-addressed b,
:root[data-theme="light"] main .ta-sched__flag.is-muted { color: var(--ta-cream); }
/* …except the contested index, which is a figure on the card, not on a band:
   the rule above turned it white on white. */
:root[data-theme="light"] main .ta-pr__legend .ta-pr__contested b { color: var(--ta-gold); }

/* The episode number sits ON the artwork, in a dark chip: it keeps the light
   ink and the dark ground whatever the page around it is doing. */
:root[data-theme="light"] main .ta-ep.has-cover .ta-ep__num {
	color: #F8F8F8;
	background: color-mix(in srgb, #06131F 68%, transparent);
}

/* The play button keeps a bright ground; its glyph must stay dark on it. */
:root[data-theme="light"] .ta-play,
:root[data-theme="light"] .ta-btn--gold { color: #16212B; }

/* Form fields: the glass fill becomes an ink tint, so the text must flip too. */
:root[data-theme="light"] .ta-newsletter .ta-newsletter__form input.ta-newsletter__field {
	color: var(--ta-cream);
	background: #FFFFFF;
	border-color: var(--ta-line);
}
:root[data-theme="light"] .ta-footer .ta-newsletter .ta-newsletter__form input.ta-newsletter__field {
	color: #F8F8F8;
	background: rgba(255, 255, 255, 0.06);
}

/* The decorative geometry is drawn in gold at low opacity for a dark ground. */
:root[data-theme="light"] main .ta-geo:not(.is-backdrop) { opacity: 0.5; }

/* The toggle itself. */
.ta-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 2px 10px;
	border: 1px solid color-mix(in srgb, #FFFFFF 30%, transparent);
	border-radius: var(--ta-pill);
	background: none;
	color: #FFFFFF;
	font-family: var(--ta-font-body);
	font-weight: 700;
	font-size: var(--ta-fs-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--ta-dur), border-color var(--ta-dur);
}
.ta-theme-toggle:hover { background: color-mix(in srgb, #FFFFFF 12%, transparent); }
.ta-theme-toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.ta-theme-toggle svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
/* One icon at a time: the one that says where the switch will take you. */
.ta-theme-toggle .ta-theme-toggle__sun { display: none; }
:root[data-theme="light"] .ta-theme-toggle .ta-theme-toggle__sun { display: block; }
:root[data-theme="light"] .ta-theme-toggle .ta-theme-toggle__moon { display: none; }
@media (max-width: 640px) {
	/* Icon only, but a finger-sized target: 28 px was a click target, not a tap. */
	.ta-theme-toggle__label { display: none; }
	.ta-theme-toggle {
		padding-inline: 0;
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}
	.ta-theme-toggle svg { width: 16px; height: 16px; }
}