/**
 * Candela — design tokens.
 *
 * Two ideas drive every value here.
 *
 * 1. THE PALETTE IS A LIGHTING PALETTE. Not "a dark theme". A lighting designer
 *    works with exactly two things: a warm source and the cool shadow it fails
 *    to reach. So there is one warm accent (--lume, candlelight), one cool
 *    accent (--cool, moonlight/shadow fill), and a neutral scale that runs from
 *    night-blue-black up to a warm paper white. Nothing else.
 *
 * 2. THE SUN IS A VARIABLE. --sun (0 = deep night, 1 = the warm minutes just
 *    after sunset) is written to :root by daylight.js as the page scrolls, and
 *    every atmospheric value below derives from it. Sections do not each own a
 *    gradient; they all read the same sun. That is what makes the site feel lit
 *    rather than decorated.
 */

:root {
	/* --- the sun (driven at runtime by daylight.js) ------------------- */
	--sun: 0.86;
	--sun-x: 22%;   /* horizontal position of the glow      */
	--sun-y: 78%;   /* vertical position; drops as you scroll */

	/* --- neutrals: night → paper ------------------------------------- */
	--ink-0: #04060b;
	--ink-1: #080c15;
	--ink-2: #0d1320;
	--ink-3: #141c2d;
	--ink-4: #1e293e;

	--paper-0: #f4efe6;
	--paper-1: #d9d3c8;
	--paper-2: #a5a099;
	--paper-3: #74716c;

	/* --- the two lights ---------------------------------------------- */
	--lume: #ffb35c;         /* candlelight — the brand accent            */
	--lume-hot: #ffd7a3;     /* the hot centre of a source                */
	--lume-deep: #c8762a;    /* the same light, further from the source   */
	--cool: #86a9f0;         /* moonlight / shadow fill                   */
	--cool-deep: #3d548a;

	/* --- surfaces ----------------------------------------------------- */
	--surface-1: rgba( 255, 255, 255, 0.030 );
	--surface-2: rgba( 255, 255, 255, 0.055 );
	--hair: rgba( 255, 255, 255, 0.100 );
	--hair-strong: rgba( 255, 255, 255, 0.185 );

	/* --- type: 7 steps, base 17px on a 1.28 ratio --------------------- */
	--t-xs:   0.780rem;
	--t-s:    0.935rem;
	--t-m:    1.0625rem;
	--t-l:    1.360rem;
	--t-xl:   1.740rem;
	--t-2xl:  2.228rem;
	--t-3xl:  2.852rem;
	/* Display sizes stay on the same ratio; they only choose which step
	   to land on as the viewport grows. */
	--t-display: clamp( 2.852rem, 1.60rem + 5.4vw, 5.95rem );
	--t-statement: clamp( 1.740rem, 1.15rem + 2.6vw, 3.30rem );

	--ff-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
	--ff-ui: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
	--ff-plot: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	--lh-tight: 1.06;
	--lh-head: 1.16;
	--lh-body: 1.62;
	--measure: 68ch;

	/* --- spacing: 8px base -------------------------------------------- */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2rem;
	--sp-5: 3rem;
	--sp-6: 4rem;
	--sp-7: 6rem;
	--sp-8: 8rem;
	--sp-9: 11rem;

	--section-y: clamp( 5rem, 3rem + 8vw, 11rem );
	--gutter: clamp( 1.25rem, 0.6rem + 2.6vw, 3.5rem );
	--maxw: 1440px;
	--maxw-narrow: 980px;

	/* --- the drafting grid (lighting-plot archetype) ------------------- */
	--plot-minor: 12px;
	--plot-major: 96px;
	--plot-line: rgba( 134, 169, 240, 0.075 );
	--plot-line-major: rgba( 134, 169, 240, 0.135 );

	/* --- motion -------------------------------------------------------- */
	--ease-out: cubic-bezier( 0.16, 0.84, 0.30, 1 );
	--ease-in: cubic-bezier( 0.55, 0, 0.85, 0.35 );
	--ease-soft: cubic-bezier( 0.36, 0.14, 0.14, 1 );
	--dur-micro: 220ms;
	--dur-ui: 380ms;
	--dur-reveal: 620ms;
	--dur-hero: 1100ms;

	--radius: 3px;   /* drawings have corners, not pills */
	--radius-lg: 5px;

	/* --- derived atmosphere: everything below reads --sun -------------- */
	--sky-zenith: color-mix( in oklab, #05070e calc( ( 1 - var( --sun ) ) * 100% ), #0a0d18 );
	--sky-horizon: color-mix( in oklab, #16243f calc( ( 1 - var( --sun ) ) * 100% ), #4a2a16 );
	--glow-warm: color-mix( in oklab, var( --cool-deep ) calc( ( 1 - var( --sun ) ) * 100% ), var( --lume-deep ) );
}

@media ( prefers-reduced-motion: reduce ) {
	:root {
		--dur-micro: 1ms;
		--dur-ui: 1ms;
		--dur-reveal: 1ms;
		--dur-hero: 1ms;
	}
}