/*
 * Galleria — tokens.css
 * The --gl-* design system, transcribed VERBATIM from DESIGN.md §2–§4 (read-only contract, G6).
 * Loaded 3rd in the chain (handle galleria-tokens, after galleria-fonts). Consumed by every later sheet.
 */

:root {
	/* ---- Color (DESIGN §2) — grounds & ink ---- */
	--gl-bg:       #F3ECE0; /* cream — the dominant page ground, "the paper" */
	--gl-ink:      #161616; /* near-black — body text, headlines, primary ink */
	--gl-detail:   #262626; /* soft dark — detail surfaces, hairlines-on-dark */
	--gl-paper-2:  #FFFFFF; /* pure white — the few surfaces brighter than the cream */

	/* the single accent — INTERVENTION, never decoration (DESIGN §2 accent rule).
	   ONE red by design: NO sibling accent/link/button reds; red is never applied
	   by the base cascade — it must be written deliberately at a sanctioned site
	   (wordmark, Etna kicker/category label, hovered post title, editorial mark).
	   --gl-red-small is NOT a second accent: it is the SAME intervention red at an
	   AA-compliant tint (4.59:1 on cream vs the brand's 3.73:1), used ONLY on the
	   small kicker/eyebrow registers (≤~19px, where 3.73 fails WCAG AA 4.5). The
	   brand #ED1C24 stays on ALL large text (≥24px / ≥18.66px bold), every hover,
	   the active filter/year, the wordmark, and the editorial marks — where it
	   passes as large text and is the identity. Owner-ruled (QA-02 OR-1, G50). */
	--gl-red:       #ED1C24;
	--gl-red-small: #D2191F;

	/* text tiers on cream */
	--gl-text:     #161616;              /* primary reading ink */
	--gl-text-2:   rgba(22,22,22,0.78);  /* deks/captions/secondary — 0.78 alpha (≈8:1), reading-scale pass */
	--gl-line:     rgba(22,22,22,0.14);  /* hairline rules, dividers */

	/* ---- Type roles (DESIGN §3) — four faces, four jobs ---- */
	--gl-font-display: "Futura", system-ui, sans-serif; /* headlines, pull-quotes ONLY */
	--gl-font-body:    "Garamond", Georgia, serif;       /* ALL reading text incl. deks/metadata */
	--gl-font-kicker:  "Etna", "Futura", sans-serif;     /* kickers / category labels (— – · fall to Futura) */
	/* Didone wordmark is delivered as inline SVG — never a webfont, never running text. */

	/* font weights (real files: Futura 400/500/700/800; Garamond 300/400/700 + 400 italic) */
	--gl-fw-body:    400;
	--gl-fw-medium:  500;
	--gl-fw-bold:    700;
	--gl-fw-heavy:   800;

	/* ---- Type scale (DESIGN §3 table; sizes are feel-gate-tunable) ---- */
	--gl-fs-display-xl:   clamp(2.75rem, 7vw, 6rem);     /* profile name / hero headline (500–700) */
	--gl-fs-display-lg:   clamp(2rem, 4vw, 3.25rem);     /* section title (500–700) */
	--gl-fs-title-card:   clamp(1.25rem, 1.8vw, 1.7rem); /* feed/tile title (500) */
	--gl-fs-title-post:   clamp(1.8rem, 3.2vw, 2.75rem); /* open-post headline (500, Futura) */
	--gl-fs-body:         1.2rem;
	--gl-lh-body:         1.6;
	--gl-fs-dek:          1.3rem;
	--gl-lh-dek:          1.55;
	--gl-fs-caption:      1.1rem;                         /* captions, meta-row values */
	--gl-fs-chip:         1.05rem;                        /* chip name */
	--gl-fs-body-serif:   clamp(1.35rem, 1.8vw, 1.55rem); /* long-form article body */
	--gl-lh-body-serif:   1.7;
	--gl-fs-kicker:       0.8rem;                         /* in-card uppercase kicker */
	--gl-track-kicker:    0.14em;                         /* kicker tracking */
	--gl-fs-eyebrow:      clamp(0.95rem, 1.3vw, 1.2rem);  /* section-level red label (700, Etna) */
	/* small meta / No. (DESIGN §3 small-meta row) */
	--gl-fs-corner-no:    0.8rem;   /* corner No. on media */
	--gl-fs-meta-label:   0.72rem;  /* Etna meta labels: Published/Read time/Dispatch/Cover week/Issue */
	--gl-fs-slot-label:   0.7rem;   /* slot placeholder labels */
	--gl-fs-gl-tile-no:   0.95rem;  /* GL tile No. */
	--gl-fs-gl-tile-date: 1.2rem;   /* GL tile date */

	/* ---- Spacing (DESIGN §4) — 4px scale ---- */
	--gl-s1: 4px;  --gl-s2: 8px;  --gl-s3: 12px; --gl-s4: 16px;
	--gl-s5: 24px; --gl-s6: 32px; --gl-s7: 48px; --gl-s8: 64px;
	--gl-s9: 96px; --gl-s10: 128px; --gl-s11: 160px;

	/* ---- Radius & layout (DESIGN §4) ---- */
	--gl-radius:       0;   /* editorial-sharp — rectangles, like print */
	--gl-radius-media: 0;
	--gl-maxw:         1280px;
	--gl-gutter:       clamp(20px, 4vw, 64px);

	/* ---- z-ladder (DESIGN §4) ---- */
	--gl-z-nav:     50;
	--gl-z-overlay: 40;
	--gl-z-sticky:  30;
	--gl-z-raised:  20;
	--gl-z-base:    10;

	/* ---- Breakpoints (CONTRACT, reference-only) ----
	   1000px · 900px · 768px · 560px. NOTE: var() does NOT work inside @media queries,
	   so these are documented values to hardcode as literal px in component/screen media
	   rules — they are NOT functional tokens. Known uses: 1000 = Voices mobile carousel /
	   rail threshold; 768 = float-unfloat / mobile. Never write @media (max-width: var(--gl-bp)). */
}

/* ---- Minimal base (design-system baseline; components/screens build on this) ---- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-synthesis: none;          /* never faux-bold a single-weight face (DESIGN §3 / CODE-STAGE-NOTES §1) */
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--gl-bg);
	color: var(--gl-text);
	font-family: var(--gl-font-body);
	font-size: var(--gl-fs-body);
	line-height: var(--gl-lh-body);
}

/* Global text selection — a solid RED block with CREAM text (the Claude Design
   behaviour: the red-eyebrow inversion applied to selection; G42). TWO SEPARATE
   rules — Firefox drops the whole selector list if it sees ::selection combined
   with ::-moz-selection. Both properties set explicitly: ::selection honours only
   a few, and omitting background lets some browsers force their default blue. */
::selection {
	background: var(--gl-red);
	color: var(--gl-bg);
}

::-moz-selection {
	background: var(--gl-red);
	color: var(--gl-bg);
}