/**
 * The raw, non-palette design tokens: spacing, radii, shadows, motion, and
 * the handful of non-hue colour tokens (`--border-on-dark`, the semantic
 * `--text-on-teal`/`--text-on-lime` heading colours, and the highlight
 * button's `--accent-highlight-hover`) blocks needed. Hue values (rose,
 * lime, ink, ...) are NOT ported here — those already live in theme.json
 * as the `--wp--preset--color--*` palette (see Palette::NAMES); porting
 * them twice would recreate exactly the two-sources-of-truth defect this
 * file exists to close.
 *
 * Values are copied verbatim from the vendored design system, never
 * retyped from memory or from a digest:
 *   _design-source/_ds/nathaly-rojas-design-system-.../tokens/spacing.css
 *   _design-source/_ds/nathaly-rojas-design-system-.../tokens/colors.css
 * (`_design-source/` is read-only — this file only ever copies from it.)
 *
 * Loaded first among the shared stylesheets (see inc/assets.php's
 * shared_files()) so every other file's `var(--token, fallback)` resolves
 * to the real value instead of its own guessed fallback.
 */

:root {
	/* tokens/spacing.css */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
	--space-11: 160px;

	--section-pad-y: 32px;
	--section-pad-x: clamp(24px, 6vw, 96px);
	--content-max: 1200px;

	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	--shadow-card: 0 1px 2px rgba(26, 26, 26, .06), 0 12px 24px -8px rgba(26, 26, 26, .16);
	--shadow-card-hover: 0 2px 4px rgba(26, 26, 26, .08), 0 20px 36px -10px rgba(26, 26, 26, .22);
	--shadow-button: 0 6px 16px -4px rgba(217, 79, 122, .45);

	--ease-standard: cubic-bezier(.22, .61, .36, 1);
	--duration-fast: 120ms;
	--duration-standard: 220ms;

	/* tokens/colors.css — the one non-hue value this file needs. */
	--border-on-dark: rgba(245, 245, 240, .2);

	/* Two more documented exceptions to this file's "no hue values" rule
	   (Task 13 fix round 1, Finding 2). `--text-on-teal` and
	   `--text-on-lime` are real semantic aliases in the vendored
	   tokens/colors.css, but they are NOT one of the twelve palette
	   entries in theme.json — they exist only as the text colour a
	   SectionHeading uses on the teal/lime section backgrounds, and adding
	   them to the colour picker would hand the owner two entries she has
	   no reason to choose herself. They stay here, wired to the two
	   `.nr-heading-on-*` helper classes in sections.css, instead of being
	   "tidied" into the palette or deleted as strays. */
	--text-on-teal: #E1F5EE;
	--text-on-lime: #1A2600;

	/* The one variant/hover colour Button.jsx uses that has no palette
	   slug either: `--accent-highlight-hover`. (`--accent-primary` and
	   `--accent-primary-hover` need no entry here — they already resolve
	   to the palette's `rose`/`rose-dark`.) */
	--accent-highlight-hover: #C4530F;

	/* Aliases onto the real font-family presets (theme.json), so any rule
	   written against `--font-body`/`--font-display` (e.g. modal.css)
	   resolves to the actual family instead of falling through to the
	   cascade's `inherit`. */
	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);

	/*
	 * Muted text, one value per surface, each measured at WCAG AA 4.5:1 or
	 * better for body-size text (docs/decisions-log.md, "Muted-text
	 * tokens"). The design mutes with a flat 60% opacity on every surface,
	 * which only passes on ink; these keep that look where it passes and
	 * darken it just enough where it does not. Burnt orange has no muted
	 * variant that reaches 4.5:1 (ink at 90% is 4.60), so it takes full ink.
	 */
	--text-muted-on-ink: rgba(245, 245, 240, 0.6); /* 6.40:1 */
	--text-muted-on-teal: rgba(245, 245, 240, 0.8); /* 5.13:1 */
	--text-muted-on-light: rgba(26, 26, 26, 0.7); /* 6.13:1 off-white, 6.20:1 cream */
	--text-muted-on-lime: rgba(26, 38, 0, 0.75); /* 5.68:1 */
	--text-muted-on-orange: #1a1a1a; /* 5.16:1 */

	/*
	 * Focus ring: an ink band between two off-white bands. On every surface
	 * the site draws, one of the two colours clears 3:1 against it — ink on
	 * off-white/cream/lime/orange, off-white on ink/teal (decisions-log,
	 * "Focus ring").
	 */
	--nr-focus-inner: var(--wp--preset--color--off-white);
	--nr-focus-ring: var(--wp--preset--color--ink);
}

/*
 * The surface each palette background is, the colour that reads on it,
 * and its muted text. A section's background class sets them, so anything
 * inside — the Download CV outline button (cards.css), the footer part,
 * the muted paragraph style — follows the surface it sits on without
 * knowing which one that is. The page itself (theme.json: off-white, ink
 * text) is the default.
 */
:root,
.has-off-white-background-color,
.has-cream-background-color,
.has-white-background-color {
	--nr-surface: var(--wp--preset--color--off-white);
	--nr-on-surface: var(--wp--preset--color--ink);
	--nr-text-muted: var(--text-muted-on-light);
}

.has-cream-background-color {
	--nr-surface: var(--wp--preset--color--cream);
}

.has-white-background-color {
	--nr-surface: var(--wp--preset--color--white);
}

.has-ink-background-color {
	--nr-surface: var(--wp--preset--color--ink);
	--nr-on-surface: var(--wp--preset--color--off-white);
	--nr-text-muted: var(--text-muted-on-ink);
}

.has-deep-teal-background-color {
	--nr-surface: var(--wp--preset--color--deep-teal);
	--nr-on-surface: var(--wp--preset--color--off-white);
	--nr-text-muted: var(--text-muted-on-teal);
}

.has-lime-background-color {
	--nr-surface: var(--wp--preset--color--lime);
	--nr-on-surface: var(--text-on-lime);
	--nr-text-muted: var(--text-muted-on-lime);
}

.has-burnt-orange-background-color {
	--nr-surface: var(--wp--preset--color--burnt-orange);
	--nr-on-surface: var(--wp--preset--color--ink);
	--nr-text-muted: var(--text-muted-on-orange);
}