/* ============================================================================
   LeverLaw — design tokens
   ----------------------------------------------------------------------------
   Source of truth for color, type, spacing, radii, shadows, motion, z-index.
   Mirrors theme.json. Front-end loads this directly; the block editor sees
   the tokens via `--wp--preset--*` synthesised from theme.json.
   ============================================================================ */

:root {
	/* --- Color · Brand --------------------------------------------------- */
	--color-brand-gold:        #E1B243;
	--color-brand-gold-soft:   #F2D583;
	--color-brand-gold-strong: #A98822;
	--color-brand-gold-deep:   #7E5F15;

	/* navy palette cut per audit row 4; dark surfaces now use ink-1000/900/700 */

	/* --- Color · Surfaces ------------------------------------------------ */
	--color-surface-0:         #FFFFFF;
	--color-surface-1:         #F8F9FB;
	--color-surface-2:         #ECEEF3;

	/* --- Color · Ink (text + neutral lines) ----------------------------- */
	--color-ink-1000:          #0E121A;
	--color-ink-900:           #1B2230;
	--color-ink-700:           #34394A;
	--color-ink-500:           #4E556A; /* body */
	--color-ink-400:           #6E7689;
	--color-ink-300:           #A4ABBC;
	--color-ink-200:           #D4D9E1;
	--color-ink-100:           #ECEEF3;

	/* --- Color · On-dark text ------------------------------------------- */
	--color-on-dark-strong:    #FFFFFF;
	--color-on-dark-body:      #D8DEEA;
	--color-on-dark-muted:     #94A0B8;

	/* --- Color · State -------------------------------------------------- */
	--color-info:              #1E6FE0;
	--color-danger:            #C8372A;

	/* --- Type · Families ------------------------------------------------ */
	/* Latin faces stay FIRST so per-glyph fallback keeps Latin on Cinzel/Lato;
	   the Korean faces (T-DESIGN-KOREAN-TYPOGRAPHY-01) sit after them and only
	   render Hangul (gated by unicode-range in fonts.css). */
	--font-display: 'Cinzel', 'Noto Serif KR', Georgia, 'Times New Roman', serif;
	--font-sans:    'Lato', 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* theme.json owns the font-family PRESETS (--wp--preset--font-family--*),
	   which the block editor's has-display-font-family / has-sans-font-family
	   classes consume with !important - so headings styled via those classes do
	   NOT read --font-display above. theme.json is outside this ticket's scope,
	   so the Korean faces are appended to the presets here (tokens.css mirrors
	   theme.json) to give preset-styled Hangul the same coverage. Latin stays
	   first; the Korean face is unicode-range-gated in fonts.css. */
	--wp--preset--font-family--display: 'Cinzel', 'Noto Serif KR', Georgia, serif;
	--wp--preset--font-family--sans:    'Lato', 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* --- Type · Scale (1.25 ratio, base 16) ----------------------------- */
	--text-2xs: 0.75rem;    /* 12 */
	--text-xs:  0.8125rem;  /* 13 */
	--text-sm:  0.875rem;   /* 14 */
	--text-md:  1rem;       /* 16 — body */
	--text-lg:  1.125rem;   /* 18 — lead */
	--text-xl:  1.25rem;    /* 20 */
	--text-2xl: 1.5625rem;  /* 25 */
	--text-3xl: 1.953rem;   /* 31 */
	--text-4xl: 2.441rem;   /* 39 */
	--text-5xl: 3.052rem;   /* 49 */
	--text-6xl: 3.815rem;   /* 61 */

	/* --- Type · Fluid (clamp) ------------------------------------------- */
	--text-h1-fluid:      clamp(2rem,    4.5vw + 1rem, 3.815rem);
	--text-h2-fluid:      clamp(1.75rem, 3.2vw + 1rem, 3.052rem);
	--text-h3-fluid:      clamp(1.5rem,  2.0vw + 1rem, 2.441rem);

	/* --- Type · Leading + tracking -------------------------------------- */
	--leading-tight:   1.15;
	--leading-snug:    1.3;
	--leading-normal:  1.5;
	--leading-relaxed: 1.65;

	--tracking-tight:   -0.01em;
	--tracking-wide:    0.05em;
	--tracking-eyebrow: 0;

	/* --- Spacing · 8px grid --------------------------------------------- */
	--space-1:  0.25rem;  /*   4 */
	--space-2:  0.5rem;   /*   8 */
	--space-3:  0.75rem;  /*  12 */
	--space-4:  1rem;     /*  16 */
	--space-5:  1.5rem;   /*  24 */
	--space-6:  2rem;     /*  32 */
	--space-7:  3rem;     /*  48 */
	--space-8:  4rem;     /*  64 */

	/* --- Radii ---------------------------------------------------------- */
	--radius-sm:    4px;
	--radius-md:    8px;
	--radius-lg:    12px;
	--radius-pill:  9999px;
	--radius-input: 3px; /* thumb-friendly soft corners; inputs only */

	/* --- Shadows (focus rings only; elevation scale removed per audit row 6) - */
	--shadow-focus: 0 0 0 3px rgba(30, 111, 224, 0.5);
	--shadow-focus-gold: 0 0 0 3px rgba(225, 178, 67, 0.55);

	/* --- Borders -------------------------------------------------------- */
	--border-divider:  1px solid var(--color-ink-200);
	--border-brand:    2px solid var(--color-brand-gold);

	/* --- Containers ----------------------------------------------------- */
	--container-narrow:  720px;
	--container-blog:    960px;
	--container-default: 1440px;
	--container-wide:    1440px;

	/* --- Motion --------------------------------------------------------- */
	--motion-fast: 150ms cubic-bezier(.2, .8, .2, 1);
	--motion-base: 250ms cubic-bezier(.2, .8, .2, 1);
	--motion-slow: 400ms cubic-bezier(.2, .8, .2, 1);

	--reveal-distance: 24px;
	--reveal-duration: var(--motion-slow);

	/* --- Z-index -------------------------------------------------------- */
	--z-header:    200;
	--z-skip-link: 700;
}

/* Korean faces stay OUT of the stacks on every page except the /ko/ tree
   (T-DESIGN-KOREAN-TYPOGRAPHY-01). The English pages carry "한국어" language
   links in the global nav; with Noto in the default stack the browser would
   fetch a Korean woff2 to render those labels. Scoping the Korean face to
   <html lang="ko"> keeps English pages Korean-font-free (their "한국어" labels
   render in the system font, as they do today) while /ko/ (lang="ko") keeps
   the Korean-inclusive :root stacks above. Higher specificity than :root
   (0,1,1 vs 0,1,0), so this wins on English pages regardless of source order. */
html:not([lang="ko"]) {
	--font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
	--font-sans:    'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--wp--preset--font-family--display: 'Cinzel', Georgia, serif;
	--wp--preset--font-family--sans:    'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* prefers-reduced-motion neutralises every motion duration the theme uses. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--motion-fast:   0ms linear;
		--motion-base:   0ms linear;
		--motion-slow:   0ms linear;
		--reveal-distance: 0px;
	}
}