/*
 * Design tokens (CLAUDE.md "Design tokens").
 *
 * Four colours, plus the tints and shades listed with them, and nothing else. Always light:
 * there is no dark mode.
 *
 *   Merlot #6B1F35 (primary)    shade #561829 (hover)   tint #EADCD9 (soft fills)
 *   Bone   #F1EBDF (background) light #FAF7F1 (cards, text on merlot)
 *                               deep  #E8DFCF (alternate sections, tiles)   line #DDD2C1 (borders, tile dots)
 *   Sage   #5B6B4E (secondary)   light #DCE1CF (category pills, success)     dark #3B4731 (text on light sage)
 *   Ink    #1E1A1B (text)        muted #574F51
 *
 * Every text/background pair used here meets WCAG AA (4.5:1); see docs/decisions.md.
 * Kadence prints --global-palette1…15 from Customizer > Colors (defaults in inc/kadence-defaults.php);
 * the semantic tokens point at those slots where one exists, so a Customizer change flows through.
 */

:root {
	/* Palette. */
	--sgc-merlot: var(--global-palette1, #6B1F35);
	--sgc-merlot-shade: var(--global-palette2, #561829);
	--sgc-merlot-tint: var(--global-palette10, #EADCD9);
	--sgc-bone: var(--global-palette8, #F1EBDF);
	--sgc-bone-light: var(--global-palette9, #FAF7F1);
	--sgc-bone-deep: var(--global-palette7, #E8DFCF);
	--sgc-bone-line: var(--global-palette15, #DDD2C1);
	--sgc-sage: var(--global-palette11, #5B6B4E);
	--sgc-sage-light: var(--global-palette13, #DCE1CF);
	--sgc-sage-dark: var(--global-palette14, #3B4731);
	--sgc-ink-base: var(--global-palette4, #1E1A1B);
	--sgc-ink-muted: var(--global-palette5, #574F51);

	/* Surfaces and text. */
	--sgc-bg: var(--sgc-bone);
	--sgc-surface: var(--sgc-bone-light);
	--sgc-surface-2: var(--sgc-bone-deep);
	--sgc-surface-3: var(--sgc-bone-line);
	--sgc-ink: var(--sgc-ink-base);
	--sgc-muted: var(--sgc-ink-muted);
	--sgc-heading: var(--global-palette3, #1E1A1B);
	--sgc-line: var(--sgc-bone-line);

	/* Brand: buttons, links, active states, errors, "few spots left". */
	--sgc-brand: var(--sgc-merlot);
	--sgc-brand-hover: var(--sgc-merlot-shade);
	--sgc-on-brand: var(--sgc-bone-light);
	--sgc-accent-soft: var(--sgc-merlot-tint);
	--sgc-warn: var(--sgc-merlot);
	--sgc-warn-soft: var(--sgc-merlot-tint);

	/* Sage: status pills (Included, Purchased, Booked, Active) and success/category pills. */
	--sgc-ok: var(--sgc-sage);
	--sgc-on-ok: var(--sgc-bone-light);
	--sgc-ok-soft: var(--sgc-sage-light);
	--sgc-ok-ink: var(--sgc-sage-dark);

	/* Hero: merlot with faint light dots. */
	--sgc-hero-bg: var(--global-palette12, #6B1F35);
	--sgc-hero-dot: rgba(255, 255, 255, .07);
	--sgc-hero-ink: var(--sgc-bone-light);
	--sgc-hero-accent: var(--sgc-sage-light); /* The hero's second headline line. */
	--sgc-hero-soft: var(--sgc-merlot-tint);
	--sgc-hero-line: rgba(250, 247, 241, .2);

	/* Course and coach tiles: deep bone with line-coloured dots. */
	--sgc-tile-bg: var(--sgc-bone-deep);
	--sgc-tile-dot: var(--sgc-bone-line);

	/* Video player. */
	--sgc-player-bg: var(--sgc-ink-base);

	--sgc-font-display: "Outfit", "Inter", system-ui, sans-serif;
	--sgc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--sgc-radius-btn: 12px;
	--sgc-radius-card: 24px;
	--sgc-radius-field: 12px;
	--sgc-shadow: 0 18px 50px -24px rgba(30, 26, 27, .3);
	--sgc-card-shadow: 0 8px 20px -12px rgba(30, 26, 27, .18);
	--sgc-btn-shadow: 0 1px 2px rgba(30, 26, 27, .08);
	--sgc-backdrop: rgba(30, 26, 27, .55);
	--sgc-dots: radial-gradient(var(--sgc-hero-dot) 1.2px, transparent 1.2px);
	--sgc-dots-size: 28px 28px;

	color-scheme: light;
}