/* ===========================================================================
 * Design tokens - the only file that sets a value.
 *
 * DARK-FIRST. The landing surface is the app's atmosphere; long-form reading
 * (articles, guides, legal pages) flips to the light surface further down.
 *
 * Two layers:
 *   1. PRIMITIVES (--c-*) are the raw scale. Never used directly.
 *   2. SEMANTICS (--bg-primary, --text-primary, --primary ...) name a job.
 *      Components use only these.
 *
 * That split is what makes a surface flip free: .site-main on a document
 * reassigns the semantic names and every component inside inverts by itself.
 *
 * No @layer on purpose. WordPress global styles and plugin CSS arrive
 * unlayered, and unlayered rules beat layered ones no matter the order - a
 * fully layered theme would lose to them. Specificity is kept flat instead.
 *
 * FOUR RULES THAT KEEP THE PALETTE FROM SPRAWLING
 *   1. Only cyan ever carries text on a fill. Blue, violet, amber and green
 *      are tile, tint and gradient-stop hues. They never bear text.
 *   2. One gradient recipe, and it is lighting, not fill. Hero and final CTA
 *      only. Never on a card, never on a button.
 *   3. One glow, on the primary call to action and the on-air dot.
 *   4. A 1px hairline is still the default separator. Tiles are the
 *      exception for content categories, not the new baseline.
 *
 * Every text value carries its measured contrast against its own ground.
 * ======================================================================== */

:root {
	/* --- primitives: ink -------------------------------------------------
	 * A cool navy-graphite, not a tinted black. The bezel of a broadcast
	 * monitor, which is the surface the product actually lives on.
	 */
	--c-ink-900: #0a0f17;
	--c-ink-800: #101722;
	--c-ink-700: #1a2331;
	--c-ink-600: #273244;
	--c-ink-500: #38455a;

	/* --- primitives: neutrals -------------------------------------------- */
	--c-grey-600: #5a6473;
	--c-grey-400: #97a0ab;
	--c-grey-300: #c3c9c6;
	--c-paper-200: #dde2df;
	--c-paper-100: #e8ebe8;
	--c-paper-50: #f1f3f1;
	--c-white: #ffffff;

	/* --- primitives: broadcast hues ---------------------------------------
	 * All six come from the SMPTE colour-bar family, which is the actual
	 * vernacular of this industry - not from a mood board. Each hue has a
	 * saturated value (fills, gradient stops, tile veils) and a bright value
	 * (the only one allowed to carry text, and only on ink).
	 */
	--c-cyan-700: #006b75; /*  5.7:1 on paper - link text on the reading surface */
	--c-cyan-600: #00a8b5; /*  6.6:1 against ink - the primary fill             */
	--c-cyan-400: #41e0ec; /* 11.3:1 on ink                                     */

	--c-blue-600: #3b6ef6;
	--c-blue-400: #7aa2ff; /*  7.3:1 on ink */

	--c-violet-600: #8b5cf6;
	--c-violet-400: #a78bfa; /*  6.7:1 on ink */

	--c-amber-600: #f5a524; /*  9.4:1 against ink - may carry ink text */
	--c-amber-400: #ffc061;

	--c-green-600: #16a86f;
	--c-green-400: #34d399; /*  9.4:1 on ink */

	--c-magenta-600: #c0184a; /* 5.4:1 on paper */
	--c-magenta-400: #ff4d7d; /* 5.7:1 on ink   */

	/* =====================================================================
	 * SEMANTICS - dark surface, the default
	 * ================================================================== */

	--bg-primary: var(--c-ink-800);
	--bg-secondary: var(--c-ink-900);
	--surface: var(--c-ink-700);
	--surface-hover: var(--c-ink-600);

	--text-primary: var(--c-paper-50); /* 16.3:1 on bg-primary */
	--text-secondary: var(--c-grey-400); /*  6.9:1 on bg-primary */

	--border: var(--c-ink-600);
	--border-strong: var(--c-ink-500);

	/* Cyan is the only accent that carries text on a fill. */
	--primary: var(--c-cyan-600);
	--primary-fg: var(--c-ink-900); /* what sits on --primary, 6.6:1 */
	--primary-text: var(--c-cyan-400);
	--link: var(--c-cyan-400);

	/* Hues. Tint, tile and gradient stops. Never text-bearing. */
	--secondary: var(--c-blue-600);
	--secondary-text: var(--c-blue-400);
	--accent: var(--c-violet-600);
	--accent-text: var(--c-violet-400);
	--accent-warm: var(--c-amber-600);

	/* Reserved: the on-air indicator and the guide playhead. Nothing else. */
	--live: var(--c-magenta-400);

	--focus: var(--c-cyan-400);

	/* --- category tile hues ------------------------------------------------
	 * A tile sets --hue to one of these; the veil, icon and rule all read it.
	 */
	--hue-blue: var(--c-blue-600);
	--hue-violet: var(--c-violet-600);
	--hue-cyan: var(--c-cyan-600);
	--hue-amber: var(--c-amber-600);
	--hue-green: var(--c-green-600);
	--hue-slate: var(--c-ink-500);

	/* --- type ---------------------------------------------------------------
	 * One family in two widths rather than two families: Archivo carries a
	 * width axis, so the expanded display voice and the normal text voice
	 * come from a single variable file. Until that file is dropped into
	 * assets/fonts/, both stacks fall back to the system UI face.
	 */
	--font-display: "Archivo Variable", "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-text: "Archivo Variable", "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--wdth-display: 112;
	--wdth-text: 100;
	--wdth-numeral: 125;

	--t-xs: 0.8125rem;
	--t-sm: 0.9375rem;
	--t-base: 1.0625rem;
	--t-md: clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);
	--t-lg: clamp(1.5rem, 1.35rem + 0.75vw, 1.9375rem);
	--t-xl: clamp(1.9375rem, 1.62rem + 1.6vw, 2.75rem);
	--t-2xl: clamp(2.375rem, 1.78rem + 2.98vw, 4rem);
	--t-3xl: clamp(2.875rem, 1.9rem + 4.9vw, 5.5rem);

	--lh-display: 0.98;
	--lh-title: 1.14;
	--lh-body: 1.6;
	--lh-tight: 1.35;

	--track-display: -0.028em;
	--track-title: -0.018em;
	--track-body: 0;

	--weight-text: 400;
	--weight-medium: 500;
	--weight-strong: 640;
	--weight-display: 760;

	/* --- spacing: 4px base, non-linear at the top ------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	--gutter: clamp(1.25rem, 0.85rem + 1.7vw, 2.5rem);
	--section-y: clamp(3.5rem, 2.5rem + 4.2vw, 7rem);

	/* --- layout ------------------------------------------------------------ */
	--w-prose: 68ch;
	--w-page: 1140px;
	--w-wide: 1400px;

	/* --- radii: four steps, each with a job ---------------------------------
	 * Not one radius on everything. The radius says what kind of thing you
	 * are looking at.
	 */
	--radius-sm: 3px; /* controls: buttons, inputs, badges, guide slots      */
	--radius-md: 8px; /* content surfaces: cards, images, the lattice frame  */
	--radius-lg: 16px; /* screen-like surfaces: the guide panel and tiles    */
	--radius-pill: 999px; /* the on-air dot and plan bullets only            */

	/* --- elevation -----------------------------------------------------------
	 * A hairline rule is still the default separator. Two shadows and one
	 * glow exist; nothing else is allowed to cast.
	 */
	--shadow-card: 0 1px 2px rgba(5, 8, 13, 0.4);
	--shadow-screen:
		0 1px 2px rgba(5, 8, 13, 0.3),
		0 28px 64px -28px rgba(5, 8, 13, 0.75);
	--glow-primary:
		0 0 0 1px rgba(65, 224, 236, 0.25),
		0 8px 32px -8px rgba(0, 168, 181, 0.45);

	/* --- lighting -------------------------------------------------------------
	 * The one gradient recipe. Two large, low-opacity radial washes over the
	 * ink ground. Hero and closing call to action only - never a card, never
	 * a button, never a border.
	 */
	--wash-cool: radial-gradient(60% 80% at 18% -10%, rgba(59, 110, 246, 0.22), transparent 70%);
	--wash-warm: radial-gradient(52% 70% at 88% 5%, rgba(245, 165, 36, 0.13), transparent 70%);
	--tile-veil: linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 62%);

	/* --- motion ------------------------------------------------------------- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 120ms;
	--dur: 220ms;
	--dur-slow: 480ms;

	/* --- depth ---------------------------------------------------------------- */
	--z-base: 1;
	--z-sticky: 50;
	--z-nav: 100;
	--z-skip: 200;
}

/* ---------------------------------------------------------------------------
 * The reading surface.
 *
 * Long-form content flips to light, where sustained reading is comfortable:
 * the 33 troubleshooting articles, the guides, the legal pages. The masthead
 * and footer stay dark, so the chrome keeps the app's atmosphere while the
 * words sit on paper.
 *
 * Reassigns the semantic layer and nothing else. No component knows it has
 * moved.
 * ------------------------------------------------------------------------ */
.is-document .site-main,
.surface-reading {
	--bg-primary: var(--c-paper-50);
	--bg-secondary: var(--c-paper-100);
	--surface: var(--c-white);
	--surface-hover: var(--c-paper-100);

	--text-primary: var(--c-ink-800); /* 16.3:1 */
	--text-secondary: var(--c-grey-600); /*  5.4:1 */

	--border: var(--c-paper-200);
	--border-strong: var(--c-grey-300);

	--primary-fg: var(--c-ink-800);
	--primary-text: var(--c-cyan-700);
	--link: var(--c-cyan-700); /* 5.7:1 - full-strength cyan is 2.6:1 and fails */

	--secondary-text: var(--c-blue-600);
	--accent-text: var(--c-violet-600);
	--live: var(--c-magenta-600);
	--focus: var(--c-cyan-700);

	--shadow-card: 0 1px 2px rgba(10, 15, 23, 0.06);
	--shadow-screen:
		0 1px 2px rgba(10, 15, 23, 0.06),
		0 28px 64px -28px rgba(10, 15, 23, 0.45);

	background-color: var(--bg-primary);
	color: var(--text-primary);
}

/* The featured plan and any block that must invert inside a surface. */
.is-inverse {
	--bg-primary: var(--c-ink-800);
	--bg-secondary: var(--c-ink-900);
	--surface: var(--c-ink-700);
	--surface-hover: var(--c-ink-600);
	--text-primary: var(--c-paper-50);
	--text-secondary: var(--c-grey-400);
	--border: var(--c-ink-600);
	--border-strong: var(--c-ink-500);
	--primary-fg: var(--c-ink-900);
	--primary-text: var(--c-cyan-400);
	--link: var(--c-cyan-400);
	--live: var(--c-magenta-400);
	--focus: var(--c-cyan-400);
}