/* ===========================================================================
 * UX UPGRADE — design token layer                                    v2.47.0
 * ---------------------------------------------------------------------------
 * The New Creation palette from the Claude Design handoff, as the theme's own
 * token layer. Enqueued LAST (priority 99) so it settles the cascade over
 * platform.css and brand.css without editing either — the handoff asks for an
 * additive layer precisely so the change stays reviewable and reversible.
 *
 * WHERE THESE VALUES COME FROM. The LIGHT set is lifted verbatim from the
 * prototypes' own root token block, not retyped from the README — the two
 * disagree, and the prototype is what the designer actually looked at.
 *
 * THE BUNDLE SHIPPED TWO PALETTES. Landing, Watch, Events and Setup share one
 * set; Give, Prayer and Sermons share a different one (--sand #FDF6E4 vs
 * #F7EFE4, --live #F1412A vs #D8442E, --tint2ink #A85526 vs #8A431C, and ten
 * more). This layer uses the FOUR-SCREEN set, because it covers the primary
 * and heaviest screens. Swapping to the other is this one block, nothing else.
 *
 * DARK IS DERIVED, NOT LIFTED. No prototype contains a dark block — #171716
 * appears in none of them. The README names 13 dark tokens; the other 21 are
 * derived here to keep the same relationships. They are marked so nobody
 * mistakes them for measured values.
 *
 * TWO TRAPS THE HANDOFF CALLS OUT, BOTH HANDLED BELOW:
 *   1. Custom properties are CASE SENSITIVE. The prototypes variously write
 *      --accsoft and --accSoft; a mismatch computes to nothing and silently
 *      drops the whole declaration. Both spellings are declared here.
 *   2. Hard-coded darks (#0B0A0C, #F4F1EC) left surfaces black inside light
 *      mode. Every surface below reads a token.
 * ========================================================================= */

:root,
html[data-theme="light"] {
	/* ---- surfaces -------------------------------------------------- */
	--pg: #FFFFFF;             /* page ground */
	--card: #FFFFFF;           /* card surface */
	--stage: #FAF7F2;          /* recessed: inset panels, table heads */
	--soft: #F2ECE3;           /* hover wash */
	--sand: #FDF6E4;           /* warm band */
	--sandink: #342200;        /* text on sand */
	--screen: #131211;         /* video letterbox / player shell */
	--onscreen: #F4F1EC;       /* text on the screen surface */

	/* ---- text ------------------------------------------------------ */
	--ink: #26231F;            /* headings, primary text */
	--body: #4F4A44;           /* body copy */
	--muted: #736C64;          /* secondary text, labels */
	--faint: #B3ABA1;          /* tertiary / disabled */

	/* ---- lines ----------------------------------------------------- */
	--line: #E4DDD2;
	--line2: #F0EAE1;

	/* ---- accent ---------------------------------------------------- */
	--acc: #A85526;            /* burnt orange: actions, active states */
	--accHover: #8E4620;
	--accBrand: #CF753E;
	--onacc: #FFFFFF;          /* text on a filled accent */
	--accsoft: #FAEDE3;        /* accent tint fill */
	--accSoft: #FAEDE3;        /* SAME VALUE, other casing — see trap 1 */
	--accLight: #F3D9C5;       /* accent-tinted border */
	--kicker: #A85526;

	/* ---- tint pairs ------------------------------------------------ */
	--teal: #2A4750;
	--tint: #E8EFF1;
	--tintink: #2A4750;
	--tint2: #FAEDE3;
	--tint2ink: #A85526;

	/* ---- state ----------------------------------------------------- */
	--live: #F1412A;           /* LIVE ONLY — never decorative */
	--success: #4F8F12;
	--info: #00588D;

	/* ---- controls -------------------------------------------------- */
	--btn2: #FFFFFF;
	--btn2Hover: #FAF7F2;

	/* ---- elevation ------------------------------------------------- */
	--sc: 0 1px 2px rgba(66,48,32,.05), 0 1px 3px rgba(66,48,32,.07);
	--sh: 0 4px 6px -1px rgba(66,48,32,.08), 0 16px 30px -10px rgba(66,48,32,.2);

	/* ---- layout ---------------------------------------------------- */
	--panelW: 392px;

	/* ---- motion: only three curves, used consistently -------------- */
	--ux-spring: cubic-bezier(.34, 1.56, .64, 1);   /* presses, pops, lifts */
	--ux-ease: cubic-bezier(.16, .84, .44, 1);      /* reveals, fills, pans */
	--ux-hover: 180ms;
	--ux-toggle: 220ms;
	--ux-dialog: 280ms;
	--ux-fill: 560ms;

	/* ---- radii ----------------------------------------------------- */
	--r-nav: 8px;
	--r-ctl: 10px;
	--r-card: 14px;
	--r-dialog: 20px;
	--r-pill: 999px;
}

/* ===========================================================================
 * DARK — warm charcoal, deliberately NOT navy. An earlier navy build read as a
 * second unrelated brand, and navy is ruled out for this site generally.
 * The 13 tokens the README names are marked (spec); the rest are derived to
 * hold the same relationships the light set has.
 * ========================================================================= */
html[data-theme="dark"] {
	--pg: #171716;             /* spec */
	--card: #1F1E1C;           /* spec */
	--stage: #1A1918;          /* spec */
	--soft: #272522;           /* spec */
	--sand: #2A2521;           /* spec */
	--sandink: #EFE6D9;        /* spec */
	--screen: #0E0D0C;         /* derived */
	--onscreen: #F4F1EC;       /* derived */

	--ink: #F7F5F2;            /* spec */
	--body: #D6D0C8;           /* spec */
	--muted: #9A938A;          /* spec */
	--faint: #6E6862;          /* spec */

	--line: #332F2B;           /* spec */
	--line2: #272421;          /* spec */

	--acc: #D4763C;            /* spec — lifted for contrast on dark */
	--accHover: #E28B52;       /* derived */
	--accBrand: #E28B52;       /* derived */
	/* White on #D4763C is about 2.9:1 and fails. A filled accent button in
	   dark mode therefore takes DARK ink, not white. */
	--onacc: #1B1310;          /* derived */
	--accsoft: rgba(212,118,60,.14);   /* derived */
	--accSoft: rgba(212,118,60,.14);   /* derived — see trap 1 */
	--accLight: #4A3527;       /* derived */
	--kicker: #D4763C;         /* derived */

	--teal: #9FC2CC;           /* derived */
	--tint: #223034;           /* derived */
	--tintink: #BFD6DD;        /* derived */
	--tint2: #33241A;          /* derived */
	--tint2ink: #E9A877;       /* derived */

	--live: #FF5A44;           /* derived — lifted so the pill stays legible */
	--success: #7BB33A;        /* derived */
	--info: #5AA9DC;           /* derived */

	--btn2: #26241F;           /* derived */
	--btn2Hover: #2E2B26;      /* derived */

	--sc: 0 1px 2px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.28);
	--sh: 0 4px 6px -1px rgba(0,0,0,.4), 0 16px 30px -10px rgba(0,0,0,.6);

	color-scheme: dark;
}

/* ===========================================================================
 * Base — typography and ground. Scoped to the theme's own app class so this
 * never reaches wp-admin.
 * ========================================================================= */
.eos-app {
	background: var(--pg);
	color: var(--body);
	font-family: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.eos-app h1, .eos-app h2, .eos-app h3, .eos-app h4 {
	color: var(--ink);
	font-weight: 700;
	letter-spacing: -.02em;
}
.eos-app h1 { letter-spacing: -.03em; }

/* Every numeric readout lines up column to column. */
.eos-app .eos-num,
.eos-app [data-count],
.eos-app time { font-variant-numeric: tabular-nums; }

/* The uppercase eyebrow and section label from the type scale. */
.ux-eyebrow {
	font-size: 9px; font-weight: 700; letter-spacing: .21em;
	text-transform: uppercase; color: var(--muted);
}
.ux-seclabel {
	font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
	text-transform: uppercase; color: var(--muted);
}

/* ---- the theme control in the header ---------------------------------- */
.ux-theme {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0;
	background: var(--btn2); color: var(--muted);
	border: 1px solid var(--line); border-radius: var(--r-ctl);
	cursor: pointer;
	transition: background var(--ux-hover) var(--ux-ease),
	            color var(--ux-hover) var(--ux-ease),
	            border-color var(--ux-hover) var(--ux-ease);
}
.ux-theme:hover { background: var(--soft); color: var(--ink); border-color: var(--accLight); }
.ux-theme:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.ux-theme svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* one icon shows at a time, chosen by the mode currently in force */
.ux-theme [data-ux-ico] { display: none; }
html[data-theme-mode="system"] .ux-theme [data-ux-ico="system"],
html[data-theme-mode="light"]  .ux-theme [data-ux-ico="light"],
html[data-theme-mode="dark"]   .ux-theme [data-ux-ico="dark"] { display: block; }
/* before the script runs, show the system glyph rather than nothing */
html:not([data-theme-mode]) .ux-theme [data-ux-ico="system"] { display: block; }

@media (prefers-reduced-motion: reduce) {
	.ux-theme { transition: none; }
}