/**
 * Design tokens — the single source of truth for the Night-First UI.
 *
 * Loaded before main.css on the front end and inside the block editor
 * (add_editor_style in inc/setup.php), so the canvas matches the site.
 * Values mirror theme.json presets; change both when editing a colour.
 *
 * Naming follows the approved design system (unprefixed, as specified).
 */

:root {
	color-scheme: dark;

	/* ── Backgrounds ─────────────────────────────────────────────────────── */
	--bg-primary: #0F1419;	    /* Page background. Never pure black. */
	--bg-secondary: #1A1F2E;    /* Sections, cards, bottom navigation. */
	--bg-elevated: #242A3A;	    /* Raised surfaces, hovered cards, sheets. */
	--bg-disclaimer: #2A2118;   /* Warm amber-tinted YMYL disclaimer block. */

	/* ── Text ────────────────────────────────────────────────────────────── */
	--text-primary: #E8EAED;
	--text-secondary: #A0A8B8;
	--text-tertiary: #6B7280;   /* Spec token. Decoration only — see --text-muted. */
	--text-muted: #8A93A5;	    /* AA-safe small text (>=4.5:1 on every surface). */
	--text-on-accent: #0F1419;  /* Dark on lavender: 5.2:1, and calmer at night than white. */

	/* ── Accent (used sparingly — one accent per screen) ─────────────────── */
	--accent: #8B7EC8;
	--accent-hover: #A78BFA;
	--accent-muted: rgba(139, 126, 200, 0.15);

	/* ── Semantic ────────────────────────────────────────────────────────── */
	--success: #6EE7B7;
	--success-muted: rgba(110, 231, 183, 0.12);
	--warning: #F59E0B;	    /* Disclaimers only. */
	--warning-muted: rgba(245, 158, 11, 0.12);
	/*
	 * "Keep in mind" items. Deliberately a muted rose, never alarm red: the
	 * UX rules of this project forbid red for errors, warnings and negatives
	 * (a red flash at 3 a.m. raises the heart rate we are trying to lower).
	 */
	--negative: #F2A8A2;
	--negative-muted: rgba(242, 168, 162, 0.12);
	--border: rgba(255, 255, 255, 0.08);
	--border-strong: rgba(255, 255, 255, 0.14);
	--overlay: rgba(15, 20, 25, 0.72);

	/* ── Spacing — 4px base module ───────────────────────────────────────── */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-9: 36px;
	--space-10: 40px;

	/* ── Layout rhythm ───────────────────────────────────────────────────── */
	--screen-padding: 18px;	    /* 16–20px screen gutters. */
	--section-gap: 32px;	    /* 28–36px between sections. */
	--card-gap: 14px;	    /* 12–16px between cards. */
	--content-width: 42rem;	    /* ≈ 66 characters at body size. */
	--wide-width: 60rem;
	--measure: 66ch;	    /* Hard cap for prose line length (65–68). */

	/* ── Typography ──────────────────────────────────────────────────────── */
	--font-heading: "Plus Jakarta Sans", "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	--text-h1: 1.75rem;	    /* 28px mobile. */
	--text-h2: 1.375rem;	    /* 22px. */
	--text-h3: 1.1875rem;	    /* 19px. */
	--text-body: 1.0625rem;	    /* 17px — comfortable at 20–30% screen brightness. */
	--text-small: 0.875rem;	    /* 14px. */
	--text-label: 0.6875rem;    /* 11px — bottom nav captions only. */

	--leading-heading: 1.25;
	--leading-body: 1.65;	    /* 1.6–1.7. */
	--leading-tight: 1.4;

	--weight-body: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	--tracking-heading: -0.015em;
	--tracking-label: 0.01em;

	/* ── Radii ───────────────────────────────────────────────────────────── */
	--radius-sm: 10px;
	--radius-button: 13px;	    /* 12–14px. */
	--radius-card: 18px;	    /* 16–20px. */
	--radius-pill: 999px;

	/* ── Elevation — soft, never "glowing" at night ──────────────────────── */
	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24);
	--shadow-raised: 0 -1px 0 var(--border);
	--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.36);

	/* ── Interactive sizing (thumb zone) ─────────────────────────────────── */
	--tap-target: 48px;
	--tap-target-sm: 40px;	 /* Dense lists and pagination, still thumb-safe. */

	/* Icon sizes — linear icons only, stroke scales with the box. */
	--icon-xs: 18px;
	--icon-sm: 20px;
	--icon-md: 24px;
	--icon-lg: 28px;
	--icon-card: 44px;	    /* Absolute minimum hit area. */
	--button-height: 54px;	    /* 52–56px primary buttons. */
	--card-min-height: 76px;    /* 72–88px problem cards. */
	--bottom-nav-height: 60px;  /* 56–64px. */
	--sticky-cta-height: 54px;  /* 52–56px. */

	/* Safe area for the iPhone home indicator. */
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-top: env(safe-area-inset-top, 0px);

	/* Vertical space reserved by fixed chrome. Both are switched on by body
	   classes so the page content is never hidden underneath. */
	--bottom-nav-space: 0px;
	--sticky-cta-space: 0px;

	/* ── Motion — slow and flat, no bounce, no overshoot ─────────────────── */
	--duration-fast: 180ms;
	--duration-base: 250ms;
	--duration-slow: 300ms;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* ── Stacking order ──────────────────────────────────────────────────── */
	--z-header: 50;
	--z-sticky-cta: 90;
	--z-bottom-nav: 100;
	--z-sheet: 110;
	--z-modal: 200;
}

/* Tablet and up: more air, slightly larger type. */
@media (min-width: 48em) {
	:root {
		--screen-padding: 24px;
		--section-gap: 40px;
		--text-h1: 2.25rem;	/* 36px. */
		--text-h2: 1.625rem;	/* 26px. */
		--text-h3: 1.25rem;	/* 20px. */
		--text-body: 1.125rem;	/* 18px. */
	}
}

/* Desktop: bottom navigation is replaced by the header menu. */
@media (min-width: 64em) {
	:root {
		--screen-padding: 32px;
		--text-body: 1.1875rem; /* 19px. */
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
	}
}