/* =========================================================
 *
 *  Design tokens — alt
 *
 *  One considered look, not another entry in the root site's style
 *  picker: a single set of custom properties, light and dark, in the
 *  spirit of churchofjesuschrist.org and mormon.org — clean, editorial,
 *  a confident navy accent, generous whitespace, cards rather than
 *  bordered rows. No webfont is loaded; like css/editorial.css on the
 *  root site, this leans on the fonts already on the reader's device.
 *
 *  Light is the default, since color-scheme is set to "light dark" and
 *  most reading happens in daylight; dark follows prefers-color-scheme
 *  and can be forced either way by alt/js/site.js via data-theme.
 *
 * ========================================================= */

:root {
	color-scheme: light dark;

	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
	        Arial, "Noto Sans", sans-serif;

	/*
	 * Names matched deliberately to the vocabulary the root site's own
	 * eight themes already use (see css/editorial.css) — --paper,
	 * --card, --paper-sunk, --ink, --ink-soft, --ink-faint, --rule,
	 * --accent. css/player.css and css/notes.css read colour through
	 * fallback chains keyed to exactly these names with no palette of
	 * their own, so alt can link those two files unchanged and get a
	 * fully working, accessible player and footnote system for free,
	 * themed in alt's own palette.
	 */

	/* ---------- light (default) ---------- */
	--paper:        #faf8f4;
	--card:         #ffffff;
	--paper-sunk:   #f1eee6;
	--ink:          #1b2430;
	--ink-soft:     #4b5566;
	--ink-faint:    #737f8f;
	--rule:         #e3e0d6;
	--rule-strong:  #cfcbbd;
	--accent:       #1c4d8c;
	--accent-ink:   #ffffff;
	--accent-soft:  #e9f0fa;
	--accent-soft-ink: #163c6c;
	--focus:        #ffb400;
	--shadow-color: 220 20% 30%;
	--shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .08), 0 1px 1px hsl(var(--shadow-color) / .06);
	--shadow-md: 0 8px 24px hsl(var(--shadow-color) / .10), 0 2px 6px hsl(var(--shadow-color) / .06);
	--shadow-lg: 0 20px 48px hsl(var(--shadow-color) / .16), 0 4px 12px hsl(var(--shadow-color) / .08);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper:        #12161d;
		--card:         #1a202a;
		--paper-sunk:   #0d1015;
		--ink:          #eef1f6;
		--ink-soft:     #b7c0cd;
		--ink-faint:    #8891a1;
		--rule:         #2a3242;
		--rule-strong:  #3a4457;
		--accent:       #6fa1e6;
		--accent-ink:   #0d1520;
		--accent-soft:  #1c2c42;
		--accent-soft-ink: #bcd3f4;
		--shadow-color: 220 60% 3%;
		--shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .5);
		--shadow-md: 0 8px 24px hsl(var(--shadow-color) / .55);
		--shadow-lg: 0 20px 48px hsl(var(--shadow-color) / .6);
	}
}

/* the toggle in the header overrides the system preference either way */
:root[data-theme="dark"] {
	--paper:        #12161d;
	--card:         #1a202a;
	--paper-sunk:   #0d1015;
	--ink:          #eef1f6;
	--ink-soft:     #b7c0cd;
	--ink-faint:    #8891a1;
	--rule:         #2a3242;
	--rule-strong:  #3a4457;
	--accent:       #6fa1e6;
	--accent-ink:   #0d1520;
	--accent-soft:  #1c2c42;
	--accent-soft-ink: #bcd3f4;
	--shadow-color: 220 60% 3%;
	--shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .5);
	--shadow-md: 0 8px 24px hsl(var(--shadow-color) / .55);
	--shadow-lg: 0 20px 48px hsl(var(--shadow-color) / .6);
}

:root[data-theme="light"] {
	--paper:        #faf8f4;
	--card:         #ffffff;
	--paper-sunk:   #f1eee6;
	--ink:          #1b2430;
	--ink-soft:     #4b5566;
	--ink-faint:    #737f8f;
	--rule:         #e3e0d6;
	--rule-strong:  #cfcbbd;
	--accent:       #1c4d8c;
	--accent-ink:   #ffffff;
	--accent-soft:  #e9f0fa;
	--accent-soft-ink: #163c6c;
	--shadow-color: 220 20% 30%;
	--shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .08), 0 1px 1px hsl(var(--shadow-color) / .06);
	--shadow-md: 0 8px 24px hsl(var(--shadow-color) / .10), 0 2px 6px hsl(var(--shadow-color) / .06);
	--shadow-lg: 0 20px 48px hsl(var(--shadow-color) / .16), 0 4px 12px hsl(var(--shadow-color) / .08);
}

:root {
	/* ---------- type scale ---------- */
	--text-xs:   .8125rem;
	--text-sm:   .9375rem;
	--text-base: 1.0625rem;
	--text-lg:   1.25rem;
	--text-xl:   1.5rem;
	--text-2xl:  1.875rem;
	--text-3xl:  clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	--text-4xl:  clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);

	/* ---------- spacing scale ---------- */
	--space-1: .25rem;
	--space-2: .5rem;
	--space-3: .75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4.5rem;

	/* ---------- shape ---------- */
	--radius-sm:   .5rem;
	--radius-md:   .875rem;
	--radius-lg:   1.25rem;
	--radius-full: 999px;

	/* ---------- layout ---------- */
	--shell:   75rem;    /* the widest a page's content ever gets */
	--measure: 42rem;    /* long-form reading width, ~68 characters */
}