/*
Theme Name:  LOIS
Theme URI:   https://lois.careers
Template:    lamoureux
Author:      Lamoureux Lane
Description: LOIS — a talent board for women over 50. Purple, fuchsia and red, saturated and never pale. This file holds tokens and nothing else; the look is assembled from them in assets/css/lois.css.
Version:     0.1.0
Requires PHP: 8.2
Text Domain: lois
*/

/*
 * Tokens only.
 *
 * A rule with a selector belongs in assets/css/lois.css. This file answers one
 * question: what does LOIS look like. Everything else reads the answers.
 */

:root {
	/* The palette. Purple is INOCHI, life force — never weight, never near-black. */
	--purple: #6B2BA6;
	--purple-lit: #8A44C8;
	--purple-mid: #4A1580;
	--purple-deep: #3B0F63;
	--fuchsia: #FF1E8C;
	--fuchsia-lit: #FF5FB0;
	--fuchsia-deep: #A81265;
	--red: #F5002B;
	--red-lit: #FF3A52;
	--red-deep: #A80022;
	--cream: #FFF0E6;

	/* Three faces, each with one job. */
	--font-util: 'Plus Jakarta Sans', system-ui, sans-serif;
	--font-head: 'Anton', sans-serif;
	--font-display: 'Six Caps', sans-serif;
	--font-hand: 'Mr Dafoe', cursive;

	/* Structure reads these. */
	--ground: var(--purple-deep);
	--measure: 1340px;

	/* Shine on surfaces, never behind type. */
	--satin: linear-gradient(116deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.04) 20%,
		rgba(0,0,0,.16) 46%, rgba(255,255,255,.18) 64%, rgba(0,0,0,.12) 82%, rgba(255,255,255,.06) 100%);

	/* The ground needs a bloom so it has body rather than sitting flat. */
	--bloom: radial-gradient(58% 52% at 18% 8%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 62%),
		radial-gradient(52% 48% at 88% 96%, rgba(255,30,140,.26) 0%, rgba(255,30,140,0) 64%),
		radial-gradient(46% 44% at 96% 6%, rgba(138,68,200,.28) 0%, rgba(138,68,200,0) 62%);
	--bloom-soft: radial-gradient(56% 50% at 14% 6%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 62%),
		radial-gradient(50% 46% at 90% 98%, rgba(255,30,140,.22) 0%, rgba(255,30,140,0) 64%);

	/* Every heading is lifted, never flat. */
	--lift: 0 2px 0 rgba(30,4,52,.55), 0 4px 0 rgba(30,4,52,.34),
		0 6px 0 rgba(30,4,52,.18), 0 14px 28px rgba(18,3,34,.62);
	--surface-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 20px 44px rgba(18,3,34,.45);

	/* The entrance. */
	--entrance: radial-gradient(60% 50% at 22% 14%, rgba(138,68,200,.9) 0%, rgba(138,68,200,0) 66%),
		radial-gradient(60% 50% at 82% 92%, rgba(255,30,140,.55) 0%, rgba(255,30,140,0) 64%), var(--purple-deep);
	--mark-ratio: 620 / 517;

	/*
	 * Three separate moments, never a stack: the mark, then the two lines that
	 * belong together, then the anchor. The two headline lines sit inside one
	 * block, so the gap below only ever opens between the three groups.
	 */
	--entrance-gap: clamp(8px, 1.4vw, 16px);
	--mark-space: clamp(52px, 11vw, 112px);
	--anchor-space: clamp(56px, 11vw, 116px);
	--mark-shadow: drop-shadow(0 18px 36px rgba(18,3,34,.6));
	--anchor-ink: #FFC9E6;

	/* Arriving. Quick, and never so quick it snaps. */
	--float-time: 620ms;
	--float-ease: cubic-bezier(.22, .61, .36, 1);
	--float-rise: 22px;
	--float-stagger: 110ms;
	--entrance-fade-height: 26svh;
	--entrance-fade: linear-gradient(to bottom, rgba(59,15,99,0) 0%, rgba(59,15,99,.55) 58%, var(--purple-deep) 100%);

	/* Search and doorways. */
	--seek-ground: linear-gradient(120deg, #6B2BA6, #4A1580);
	--seek-rule: rgba(255,255,255,.24);
	--seek-ink: #fff;
	--seek-placeholder: rgba(255,255,255,.92);
	--seek-button: linear-gradient(120deg, var(--fuchsia-lit), var(--fuchsia));
	--seek-button-ink: #fff;
	--chip-ink: rgba(255,240,230,.92);
	--chip-ink-hover: #fff;
	--chip-rule: rgba(255,240,230,.42);
	--chip-rule-hover: var(--fuchsia-lit);
	--door-ink: #fff;

	/* The numbered band. */
	--row-ground: var(--purple-lit);
	--row-ink: var(--cream);
	--row-ink-soft: #F3DCFF;
	--num-ground: var(--red);
	--num-ink: var(--cream);

	/* The roles index. */
	--top-ground: rgba(74, 21, 128, .94);
	--top-rule: rgba(255, 240, 230, .16);
	--chip-current: var(--fuchsia);
	--surface-shadow-soft: inset 0 2px 0 rgba(255,255,255,.42), 0 12px 26px rgba(18,3,34,.34);
	--count-ink: #fff;
	--count-figure: var(--fuchsia-lit);
	--count-note: #E3C7F5;
	--card-ink: var(--cream);
	--card-title-ink: #fff;
	--card-body-ink: rgba(255, 240, 230, .94);
	--card-meta-ink: rgba(255, 240, 230, .9);
	--card-pay-ink: #fff;
	--card-rule: rgba(255, 240, 230, .24);
	--card-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 14px 30px rgba(18,3,34,.3);
	--card-shadow-lift: inset 0 1px 0 rgba(255,255,255,.3), 0 22px 44px rgba(18,3,34,.44);
	--org-ink: #fff;
	--live-ink: rgba(255, 240, 230, .75);
	--pill-ink: #2A0E45;

	/* The empty search. MA — the space before, full of possibility. */
	--ma-ground: radial-gradient(60% 55% at 50% 10%, rgba(138,68,200,.5) 0%, rgba(138,68,200,0) 66%), var(--purple-mid);
	--act-ink: #fff;
	--act-ground: linear-gradient(120deg, var(--fuchsia-lit), var(--fuchsia));
	--act-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 26px rgba(18,3,34,.4);
	--act-quiet-rule: rgba(255, 240, 230, .4);
	--note-ground: var(--purple-deep);
	--note-ink: #D9BBEF;

	/* The foot, and reaching it by keyboard. */
	--foot-ground: var(--purple-deep);
	--foot-ink: #C9A0E8;
	--skip-ground: var(--red);
	--skip-ink: var(--cream);
	--focus: var(--fuchsia-lit);
}