/* ============================================================
   Creativ Razor / Design Tokens

   Palette: OKLCH. Amber is sampled straight from the live logo file
   (#F8B810); oklch(82% 0.166 83) round-trips to #f8b812, one point off.
   Neutrals are tinted toward the amber hue (83deg) so nothing in the
   system is a true grey, and nothing is pure black or white.

   Amber is an ACCENT here: text, rules, pills. It is never a full
   surface. Type is Montserrat at normal width.

   Everything is --cr- prefixed on purpose: Growla and the remaining
   plugins ship their own custom properties, and bare names like --font
   or --section would collide.
   ============================================================ */
:root {
	/* ---- Grounds ---------------------------------------------------- */
	--cr-ink:      oklch(14%   0.008 83);   /* #0b0906  primary canvas   */
	--cr-ink-2:    oklch(19%   0.010 83);   /* #16130f  raised surface   */
	--cr-ink-3:    oklch(26%   0.012 83);   /* #27241e  borders, fields  */
	--cr-bone:     oklch(95.5% 0.012 85);   /* #f4f0e7  inversion ground */
	--cr-bone-2:   oklch(90%   0.016 85);   /* #e3ddd2  bone surface     */

	/* ---- The amber ------------------------------------------------- */
	--cr-amber:    oklch(82%   0.166 83);   /* #f8b812  THE logo colour  */
	--cr-ember:    oklch(70%   0.155 72);   /* #d88b00  depth, pressed   */
	--cr-amber-hi: oklch(89%   0.170 92);   /* #ffd634  hairlines, wipes */

	/* ---- Type colours. Every pair measured; see DESIGN.md. ---------- */
	--cr-mute-ink:  oklch(66% 0.014 83);    /* #969289   6.4:1 on ink    */
	--cr-mute-bone: oklch(46% 0.018 83);    /* #5d574d   6.3:1 on bone   */
	--cr-white:     oklch(99% 0.004 85);    /* #fdfcf9   warm, never #fff*/

	/* ---- Veils + hairlines ----------------------------------------- */
	--cr-hair-ink:   oklch(99% 0.004 85 / .15);
	--cr-hair-bone:  oklch(14% 0.008 83 / .16);
	--cr-veil-nav:   oklch(14% 0.008 83 / .86);
	--cr-amber-wash: oklch(82% 0.166 83 / .07);
	--cr-amber-glow: oklch(82% 0.166 83 / .20);

	/* ---- Type -----------------------------------------------------
	   Montserrat. The italic is load-bearing: the brand rule is "one
	   italic, one idea", so `.cr-em` is a real italic cut, never a
	   decorative script.                                             */
	--cr-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* ---- Fluid scale, >=1.25 between steps ------------------------- */
	--cr-fs-label:   clamp(0.68rem, 0.65rem + 0.12vw, 0.76rem);
	--cr-fs-body:    clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
	--cr-fs-lead:    clamp(1.1rem, 1rem + 0.55vw, 1.42rem);
	--cr-fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
	--cr-fs-h2:      clamp(2rem, 1.3rem + 3.3vw, 3.9rem);
	--cr-fs-display: clamp(2.8rem, 1.3rem + 6.2vw, 6.5rem);
	--cr-fs-figure:  clamp(2.5rem, 1.4rem + 5vw, 5rem);

	/* ---- Layout ----------------------------------------------------
	   The shell runs full width; the gutter is what keeps it off the
	   edge. Nothing is centred in a 1280px column any more, so on a
	   1900px display the nav, the work grid and the footer all use the
	   whole screen. Long-form text is unaffected: `--cr-measure` is
	   carried by the prose itself, never by `.cr-container`. */
	--cr-maxw:    100%;
	--cr-measure: 62ch;
	--cr-gut:     clamp(1.25rem, 4vw, 4.5rem);
	--cr-section: clamp(4.5rem, 9vw, 8rem);
	--cr-nav-h:   4.5rem;

	/* Corner radius. The site was built on 2-3px, which reads as "square
	   with a manufacturing tolerance" rather than as a decision. One token
	   so the framed boxes on a case page round together. */
	--cr-r:       0.7rem;

	/* ---- Motion. Ease-out only; no bounce, no elastic. -------------
	   Entrances use expo (decisive), state changes use quart (calm).  */
	--cr-ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
	--cr-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--cr-ease-quint: cubic-bezier(0.22, 1, 0.36, 1);

	/* Durations scale with the mass of the thing being moved. */
	--cr-dur-tap:   140ms;
	--cr-dur-state: 280ms;
	--cr-dur-body:  700ms;
	--cr-dur-head:  900ms;
	--cr-dur-mass: 1050ms;
}

/* ============================================================
   Ground contract.
   Each surface publishes --cr-fg / --cr-fg-mute / --cr-bg /
   --cr-surface / --cr-hair / --cr-accent. Components consume those
   and never hardcode a colour, so any component is correct on any
   ground without knowing where it landed.

   --cr-accent is the important one: amber on bone measures 1.56:1,
   so on a light ground the accent role passes to ink and the italic
   carries the emphasis by itself.
   ============================================================ */
:root, .cr-on-ink {
	--cr-fg: var(--cr-white);
	--cr-fg-mute: var(--cr-mute-ink);
	--cr-bg: var(--cr-ink);
	--cr-surface: var(--cr-ink-2);
	--cr-hair: var(--cr-hair-ink);
	--cr-accent: var(--cr-amber);
	--cr-accent-quiet: var(--cr-amber);
}

.cr-on-bone {
	--cr-fg: var(--cr-ink);
	--cr-fg-mute: var(--cr-mute-bone);
	--cr-bg: var(--cr-bone);
	--cr-surface: var(--cr-bone-2);
	--cr-hair: var(--cr-hair-bone);
	--cr-accent: var(--cr-ink);          /* amber would be 1.56:1 here */
	--cr-accent-quiet: var(--cr-ember);  /* 4.6:1, small labels only  */
}