/* ==========================================================================
   Third Attractor — design tokens
   Extracted from 3da.manifest-nirvana.com (Elementor kit #10) + the language of
   Daniela's featured images. theme.json in the (child) theme is the canonical
   home for these; this file makes the same presets resolve on a classic theme
   and defines the --ta-* aliases the block CSS uses.
   ========================================================================== */

:root {
	/* The palette itself is NOT declared here on purpose: theme.json owns it, and
	   this file loads after the global styles — redeclaring the presets would
	   silently override every change made in theme.json or in the Styles panel.
	   A theme without theme.json gets them from classic-fallback.css instead. */

	/* --- Aliases used by the block CSS (respect theme.json when present) --- */
	--ta-void: var(--wp--preset--color--void, #06131F);
	--ta-void-2: var(--wp--preset--color--void-2, #0B1F33);
	--ta-navy: var(--wp--preset--color--navy, #002544);
	--ta-teal: var(--wp--preset--color--teal, #008080);
	--ta-teal-deep: var(--wp--preset--color--teal-deep, #005774);
	--ta-teal-glow: var(--wp--preset--color--teal-glow, #1FB5B0);
	--ta-teal-ice: var(--wp--preset--color--teal-ice, #9FE3E0);
	--ta-aqua: var(--wp--preset--color--aqua, #00FFFF);
	--ta-gold: var(--wp--preset--color--gold, #E9CF94);
	--ta-gold-sun: var(--wp--preset--color--gold-sun, #E9CF94);
	--ta-gold-line: var(--wp--preset--color--gold-line, #C9A961);
	--ta-cream: var(--wp--preset--color--cream, #F8F8F8);
	--ta-white: var(--wp--preset--color--white, #FFFFFF);
	--ta-black: var(--wp--preset--color--black, #000000);
	--ta-muted: var(--wp--preset--color--muted, #9AA6B2);
	--ta-surface: var(--wp--preset--color--surface, rgba(255, 255, 255, 0.05));
	--ta-body-1: var(--wp--preset--color--main-soft, #DCE6EC);
	--ta-body-2: var(--wp--preset--color--main-accent, #B9C6D0);
	--ta-mist: var(--wp--preset--color--teal-mist, #CFE3E6);

	/* The five stances Sextant reads. Palette slugs, so they are editable. */
	--ta-stance-embraces: var(--wp--preset--color--stance-embraces, #1FB5B0);
	--ta-stance-qualifies: var(--wp--preset--color--stance-qualifies, #9FE3E0);
	--ta-stance-reframes: var(--wp--preset--color--stance-reframes, #E9CF94);
	--ta-stance-contests: var(--wp--preset--color--stance-contests, #E0708A);
	--ta-stance-none: var(--wp--preset--color--stance-none, #3C4A57);

	/* --- Derived surfaces -------------------------------------------------
	   Every translucent value is mixed from a palette colour rather than
	   written out, so changing a single palette entry moves the whole family
	   with it — veils stay in tune with the page ground, glass with the text
	   colour, glows with their accent. Nothing below is a literal. */
	--ta-glass: color-mix(in srgb, var(--ta-cream) var(--wp--custom--glass--fill, 6%), transparent);
	--ta-edge: color-mix(in srgb, var(--ta-cream) var(--wp--custom--glass--edge, 16%), transparent);
	--ta-edge-soft: color-mix(in srgb, var(--ta-cream) var(--wp--custom--glass--edge-soft, 10%), transparent);
	--ta-edge-strong: color-mix(in srgb, var(--ta-cream) var(--wp--custom--glass--edge-strong, 50%), transparent);
	--ta-track: color-mix(in srgb, var(--ta-cream) var(--wp--custom--glass--track, 12%), transparent);

	/* Veils over photography, from the page ground. */
	--ta-veil-0: color-mix(in srgb, var(--ta-void) 0%, transparent);
	--ta-veil-soft: color-mix(in srgb, var(--ta-void) 55%, transparent);
	--ta-veil: color-mix(in srgb, var(--ta-void) 80%, transparent);
	--ta-veil-strong: color-mix(in srgb, var(--ta-void) 92%, transparent);
	--ta-veil-full: color-mix(in srgb, var(--ta-void) 96%, transparent);
	--ta-player-ground: color-mix(in srgb, var(--ta-void) 60%, transparent);
	--ta-plate-ground: var(--ta-black);
	--ta-shadow: color-mix(in srgb, var(--ta-black) 45%, transparent);

	/* Accents at reduced strength. */
	--ta-aqua-line: color-mix(in srgb, var(--ta-aqua) 35%, transparent);
	--ta-aqua-glow: color-mix(in srgb, var(--ta-aqua) 12%, transparent);
	--ta-aqua-edge: color-mix(in srgb, var(--ta-aqua) 40%, transparent);
	--ta-gold-tint: color-mix(in srgb, var(--ta-gold) 18%, transparent);
	--ta-gold-tint-soft: color-mix(in srgb, var(--ta-gold) 5%, transparent);
	--ta-gold-edge: color-mix(in srgb, var(--ta-gold) 30%, transparent);
	--ta-gold-edge-strong: color-mix(in srgb, var(--ta-gold) 70%, transparent);
	--ta-gold-halo: color-mix(in srgb, var(--ta-gold) 25%, transparent);
	--ta-orbit: color-mix(in srgb, var(--ta-gold-line) 50%, transparent);
	--ta-orbit-soft: color-mix(in srgb, var(--ta-gold-line) 35%, transparent);

	/* The hairline used by every panel — follows the `border-light` slug. */
	--ta-line: var(--wp--preset--color--border-light, rgba(248, 248, 248, 0.14));
	/* Conversation cards keep their own pair, so their outline can change
	   without touching the footer rule, the bands or the plates. */
	--ta-card-line: var(--ta-line);
	--ta-card-line-hover: var(--ta-aqua-line);

	--ta-font-display: var(--wp--preset--font-family--display, "Smooch Sans", "Arial Narrow", sans-serif);
	--ta-font-body: var(--wp--preset--font-family--body, Montserrat, system-ui, sans-serif);
	--ta-font-label: var(--wp--preset--font-family--label, Gruppo, Montserrat, sans-serif);
	--ta-font-editorial: var(--wp--preset--font-family--editorial, "Cormorant Garamond", Georgia, serif);

	/* Interface type scale — the small caps labels the components use. */
	--ta-fs-micro: var(--wp--custom--ui--micro, 8px);
	--ta-fs-tiny: var(--wp--custom--ui--tiny, 9px);
	--ta-fs-small: var(--wp--custom--ui--small, 10px);
	--ta-fs-label: var(--wp--custom--ui--label, 11px);
	--ta-fs-base: var(--wp--custom--ui--base, 12px);
	--ta-fs-chip: var(--wp--custom--ui--chip, 12.5px);

	--ta-radius-s: var(--wp--custom--radius--small, 10px);
	--ta-radius: var(--wp--custom--radius--medium, 18px);
	--ta-radius-l: var(--wp--custom--radius--large, 28px);
	--ta-pill: var(--wp--custom--radius--pill, 999px);
	--ta-ease: var(--wp--custom--motion--easing, cubic-bezier(0.2, 0.7, 0.2, 1));
	--ta-dur: var(--wp--custom--motion--duration, 0.22s);
	--ta-glow-teal: 0 0 0 1px color-mix(in srgb, var(--ta-teal-glow) 35%, transparent), 0 0 40px -6px color-mix(in srgb, var(--ta-teal-glow) 45%, transparent);
	--ta-glow-gold: 0 0 0 1px color-mix(in srgb, var(--ta-gold-line) 40%, transparent), 0 0 36px -8px color-mix(in srgb, var(--ta-gold) 45%, transparent);
}

/* --- Preset utility classes (core emits these from theme.json; repeated here
       with identical values so a classic theme paints the same) --- */
.has-void-color { color: var(--ta-void); }
.has-void-2-color { color: var(--ta-void-2); }
.has-navy-color { color: var(--ta-navy); }
.has-teal-color { color: var(--ta-teal); }
.has-teal-deep-color { color: var(--ta-teal-deep); }
.has-teal-glow-color { color: var(--ta-teal-glow); }
.has-teal-ice-color { color: var(--ta-teal-ice); }
.has-aqua-color { color: var(--ta-aqua); }
.has-gold-color { color: var(--ta-gold); }
.has-gold-sun-color { color: var(--ta-gold-sun); }
.has-cream-color { color: var(--ta-cream); }
.has-paper-color { color: var(--wp--preset--color--paper, #FBFAF6); }
.has-ink-color { color: var(--wp--preset--color--ink, #333); }
.has-muted-color { color: var(--ta-muted); }

.has-void-background-color { background-color: var(--ta-void); }
.has-void-2-background-color { background-color: var(--ta-void-2); }
.has-navy-background-color { background-color: var(--ta-navy); }
.has-teal-background-color { background-color: var(--ta-teal); }
.has-teal-deep-background-color { background-color: var(--ta-teal-deep); }
.has-teal-glow-background-color { background-color: var(--ta-teal-glow); }
.has-teal-ice-background-color { background-color: var(--ta-teal-ice); }
.has-aqua-background-color { background-color: var(--ta-aqua); }
.has-gold-background-color { background-color: var(--ta-gold); }
.has-gold-sun-background-color { background-color: var(--ta-gold-sun); }
.has-cream-background-color { background-color: var(--ta-cream); }
.has-paper-background-color { background-color: var(--wp--preset--color--paper, #FBFAF6); }
.has-surface-background-color { background-color: var(--ta-surface); }

/* Ollie's semantic slugs, remapped to the brand (mirrors the child theme's theme.json). */
.has-base-background-color { background-color: var(--ta-void); }
.has-tertiary-background-color { background-color: var(--ta-void-2); }
.has-primary-background-color { background-color: var(--ta-aqua); }
.has-main-color { color: var(--ta-cream); }
.has-secondary-color { color: var(--ta-muted); }
.has-primary-color { color: var(--ta-aqua); }
.has-primary-accent-color { color: var(--ta-teal-ice); }

.has-display-font-family { font-family: var(--ta-font-display); }
.has-body-font-family { font-family: var(--ta-font-body); }
.has-label-font-family { font-family: var(--ta-font-label); }
.has-editorial-font-family { font-family: var(--ta-font-editorial); }

/* The Resonance scale (added alongside Ollie's own x-small…xx-large, never replacing it). */
.has-eyebrow-font-size { font-size: 13px; }
.has-caption-font-size { font-size: 14px; }
.has-lead-font-size { font-size: clamp(17px, 1.5vw, 21px); }
.has-card-title-font-size { font-size: clamp(26px, 3vw, 36px); }
.has-section-title-font-size { font-size: clamp(40px, 5vw, 64px); }
.has-hero-font-size { font-size: clamp(72px, 10vw, 160px); }

/* ---------------------------------------------------------------------------
   Bas de l'échelle typographique sur écrans tactiles.

   Les libellés en petites capitales descendent à 8/9/10 px : lisible à 60 cm
   sur un 27 pouces, plus du tout dans une main. Les composants ne codent aucune
   taille en dur — ils lisent ces trois jetons — donc un seul palier remonte
   d'un cran ~250 libellés (séries, numéros d'épisode, compteurs, drapeaux
   d'agenda, index des propositions) sur tout le site et dans les deux thèmes.
   Les valeurs restent sous le corps de texte : la hiérarchie ne bouge pas.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
	:root {
		--ta-fs-micro: 10px;
		--ta-fs-tiny: 11px;
		--ta-fs-small: 12px;
	}
}