/**
 * UK Social Care Directory — Design Tokens
 * ----------------------------------------------------------------------------
 * The single source of truth for every value in the design system.
 *
 * THREE LAYERS, and the order matters:
 *
 *   1. PRIMITIVES   Context-free raw values. Never referenced by components.
 *   2. SEMANTIC     Role names (surface, text, accent). Components use ONLY these.
 *   3. PALETTE      The only place a hex literal is allowed to appear.
 *                   `.scd-theme-dark` (front end) / `.scd-theme-light` (wp-admin).
 *
 * Because components resolve through layer 2, every component is written once
 * and works in both themes. If you find yourself typing a hex value anywhere
 * outside layer 3, stop — the token you want either exists or needs adding here.
 *
 * BREAKPOINTS ARE COMMENTS, NOT TOKENS. Custom properties are illegal inside a
 * media query — `@media (min-width: var(--x))` silently never matches. Use the
 * literal numbers below and nothing else:
 *
 *     sm   480px    large phone
 *     md   768px    tablet portrait      <- the main layout switch
 *     lg  1024px    tablet landscape
 *     xl  1280px    desktop
 *     2xl 1600px    wide
 *
 * Scales were calibrated against the values actually in use across the 7,776
 * inline declarations this system replaces, so the numbers below are the real
 * ones rounded onto a grid — not an idealised scale the markup will fight.
 */

:root {

	/* ===================================================================
	 * 1. PRIMITIVES
	 * =================================================================== */

	/* --- Spacing: 4px grid ------------------------------------------- */
	--scd-space-0: 0;
	--scd-space-1: 4px;
	--scd-space-2: 8px;
	--scd-space-3: 12px;
	--scd-space-4: 16px;
	--scd-space-5: 20px;
	--scd-space-6: 24px;
	--scd-space-8: 32px;
	--scd-space-10: 40px;
	--scd-space-12: 48px;
	--scd-space-16: 64px;
	--scd-space-20: 80px;
	--scd-space-24: 96px;

	/* --- Radius ------------------------------------------------------ */
	--scd-radius-xs: 4px;
	--scd-radius-sm: 6px;
	--scd-radius-md: 8px;
	--scd-radius-lg: 12px;
	--scd-radius-xl: 16px;
	--scd-radius-2xl: 20px;
	--scd-radius-pill: 999px;
	--scd-radius-circle: 50%;

	/* --- Type scale: fluid, clamp(min, preferred, max) ----------------
	 * This is a dense data UI — the existing base is 13px. The scale below
	 * lifts that to ~13.5-15px fluid, which is a readability win on mobile
	 * without reflowing desktop layouts.
	 */
	--scd-text-2xs: clamp(0.625rem, 0.61rem + 0.08vw, 0.6875rem);   /*  10 - 11 */
	--scd-text-xs:  clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);    /*  11 - 12 */
	--scd-text-sm:  clamp(0.75rem, 0.73rem + 0.11vw, 0.8125rem);    /*  12 - 13 */
	--scd-text-base:clamp(0.8125rem, 0.79rem + 0.13vw, 0.9063rem);  /*  13 - 14.5 */
	--scd-text-md:  clamp(0.875rem, 0.85rem + 0.14vw, 0.9688rem);   /*  14 - 15.5 */
	--scd-text-lg:  clamp(0.9375rem, 0.90rem + 0.20vw, 1.0625rem);  /*  15 - 17 */
	--scd-text-xl:  clamp(1.0625rem, 1.00rem + 0.32vw, 1.25rem);    /*  17 - 20 */
	--scd-text-2xl: clamp(1.25rem, 1.13rem + 0.60vw, 1.5rem);       /*  20 - 24 */
	--scd-text-3xl: clamp(1.5rem, 1.28rem + 1.05vw, 2rem);          /*  24 - 32 */
	--scd-text-4xl: clamp(1.75rem, 1.35rem + 1.95vw, 2.75rem);      /*  28 - 44 */

	/* --- Leading / weight / tracking --------------------------------- */
	--scd-leading-none: 1;
	--scd-leading-tight: 1.15;
	--scd-leading-snug: 1.3;
	--scd-leading-normal: 1.55;
	--scd-leading-relaxed: 1.75;

	--scd-weight-normal: 400;
	--scd-weight-medium: 500;
	--scd-weight-semibold: 600;
	--scd-weight-bold: 700;
	--scd-weight-black: 800;

	--scd-tracking-tight: -0.02em;
	--scd-tracking-normal: 0;
	--scd-tracking-wide: 0.04em;
	--scd-tracking-wider: 0.08em;

	/* --- Font families ------------------------------------------------
	 * Outfit is self-hosted (see fonts.css). The stack degrades to the
	 * system UI font so nothing shifts if the webfont fails.
	 */
	--scd-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, 'Helvetica Neue', Arial, sans-serif;
	--scd-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
		'Liberation Mono', monospace;

	/* --- Elevation ---------------------------------------------------- */
	--scd-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.12);
	--scd-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.18);
	--scd-shadow-3: 0 10px 30px rgba(0, 0, 0, 0.25);
	--scd-shadow-4: 0 20px 50px rgba(0, 0, 0, 0.35);
	--scd-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

	/* --- Motion -------------------------------------------------------
	 * Zeroed wholesale under prefers-reduced-motion at the end of this file,
	 * which is why every transition must be expressed through these.
	 */
	--scd-dur-fast: 120ms;
	--scd-dur-base: 220ms;
	--scd-dur-slow: 400ms;
	--scd-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
	--scd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--scd-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* --- Z-index ------------------------------------------------------ */
	--scd-z-base: 1;
	--scd-z-raised: 10;
	--scd-z-sticky: 100;
	--scd-z-dropdown: 500;
	--scd-z-overlay: 9000;
	--scd-z-modal: 9500;
	--scd-z-toast: 9900;

	/* --- Layout ------------------------------------------------------- */
	--scd-container: 1280px;
	--scd-container-narrow: 880px;
	--scd-gutter: clamp(16px, 4vw, 32px);

	/* Grid defaults, overridden per-instance by modifier classes. */
	--scd-grid-cols: 2;
	--scd-autogrid-min: 260px;

	/* Minimum interactive target. WCAG 2.5.5 asks for 44px. */
	--scd-tap: 44px;

	/* --- Terminal ------------------------------------------------------
	 * The log console and copyable command blocks stay dark in BOTH themes:
	 * they are terminals, and a terminal reads better dark regardless of the
	 * surrounding chrome. Because they never vary by theme they are
	 * primitives, not semantic roles — this is the one intentional exception
	 * to "colour lives in the palette layer".
	 *
	 * Values are WordPress's own admin greys plus the standard terminal
	 * accent hues, so the console still looks native inside wp-admin.
	 */
	--scd-term-bg: #1d2327;
	--scd-term-fg: #f0f0f1;
	--scd-term-muted: #8c8f94;
	--scd-term-error: #ff8085;
	--scd-term-warn: #f2d675;
	--scd-term-success: #68de7c;
	--scd-term-info: #72aee6;
}

/* =====================================================================
 * 3a. PALETTE — DARK (front end)
 *
 * The established brand: slate surfaces, indigo accent. Hex literals are
 * permitted here and nowhere else.
 * ===================================================================== */

.scd-theme-dark {

	/* Surfaces, back to front */
	--scd-surface-0: #0f172a;                      /* page background      */
	--scd-surface-1: rgba(30, 41, 59, 0.7);        /* card (glassy)        */
	--scd-surface-2: #1e293b;                      /* raised / hover       */
	--scd-surface-3: #0b1120;                      /* inputs, wells        */
	--scd-surface-inset: rgba(15, 23, 42, 0.45);

	/* Borders */
	--scd-border: rgba(255, 255, 255, 0.10);
	--scd-border-subtle: rgba(255, 255, 255, 0.05);
	--scd-border-strong: #334155;

	/* Text — a four-step ramp. #cbd5e1 and #94a3b8 are genuinely distinct
	 * roles in the existing markup (168 and 217 uses respectively), so both
	 * earn a name. Collapsing them would flatten the hierarchy.
	 */
	--scd-text: #f8fafc;
	--scd-text-secondary: #cbd5e1;
	--scd-text-muted: #94a3b8;
	--scd-text-subtle: #64748b;
	--scd-text-invert: #0f172a;

	/* Accent */
	--scd-accent: #6366f1;
	--scd-accent-hover: #4f46e5;
	--scd-accent-light: #818cf8;
	--scd-accent-contrast: #ffffff;
	--scd-accent-soft: rgba(99, 102, 241, 0.14);
	--scd-accent-on-soft: #a5b4fc;
	--scd-accent-ring: rgba(99, 102, 241, 0.45);
	--scd-accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);

	/* Status. `-soft` is the tinted background, `-on-soft` the text that
	 * sits on it — the lighter tints the markup already reaches for.
	 */
	--scd-success: #10b981;
	--scd-success-soft: rgba(16, 185, 129, 0.14);
	--scd-success-on-soft: #34d399;

	--scd-warning: #f59e0b;
	--scd-warning-soft: rgba(245, 158, 11, 0.14);
	--scd-warning-on-soft: #fbbf24;

	--scd-danger: #ef4444;
	--scd-danger-soft: rgba(239, 68, 68, 0.14);
	--scd-danger-on-soft: #f87171;

	--scd-info: #0ea5e9;
	--scd-info-soft: rgba(14, 165, 233, 0.14);
	--scd-info-on-soft: #38bdf8;

	/* Chrome */
	--scd-overlay: rgba(2, 6, 23, 0.72);
	--scd-focus-ring: #a5b4fc;
	--scd-link: #a5b4fc;
	--scd-link-hover: #c7d2fe;
	--scd-skeleton: rgba(255, 255, 255, 0.06);

	color-scheme: dark;
}

/* =====================================================================
 * 3b. PALETTE — LIGHT (wp-admin)
 *
 * Deliberately native to WordPress: these are core admin values, so our
 * screens sit alongside core screens without looking like a foreign object.
 * ===================================================================== */

.scd-theme-light {

	--scd-surface-0: #f0f0f1;                      /* wp-admin body        */
	--scd-surface-1: #ffffff;                      /* card / postbox       */
	--scd-surface-2: #f6f7f7;                      /* raised / hover / th  */
	--scd-surface-3: #ffffff;                      /* inputs               */
	--scd-surface-inset: #f6f7f7;

	--scd-border: #c3c4c7;
	--scd-border-subtle: #dcdcde;
	--scd-border-strong: #8c8f94;

	--scd-text: #1d2327;
	--scd-text-secondary: #3c434a;
	--scd-text-muted: #50575e;
	--scd-text-subtle: #787c82;
	--scd-text-invert: #ffffff;

	--scd-accent: #2271b1;
	--scd-accent-hover: #135e96;
	--scd-accent-light: #72aee6;
	--scd-accent-contrast: #ffffff;
	--scd-accent-soft: #f0f6fc;
	--scd-accent-on-soft: #0a4b78;
	--scd-accent-ring: rgba(34, 113, 177, 0.35);
	--scd-accent-gradient: linear-gradient(135deg, #2271b1 0%, #135e96 100%);

	--scd-success: #00a32a;
	--scd-success-soft: #edfaef;
	--scd-success-on-soft: #005c12;

	--scd-warning: #dba617;
	--scd-warning-soft: #fcf9e8;
	--scd-warning-on-soft: #8a6116;

	--scd-danger: #d63638;
	--scd-danger-soft: #fcf0f1;
	--scd-danger-on-soft: #8a2424;

	--scd-info: #2271b1;
	--scd-info-soft: #f0f6fc;
	--scd-info-on-soft: #0a4b78;

	--scd-overlay: rgba(0, 0, 0, 0.5);
	--scd-focus-ring: #2271b1;
	--scd-link: #2271b1;
	--scd-link-hover: #135e96;
	--scd-skeleton: rgba(0, 0, 0, 0.06);

	/* Softer elevation reads better on a light ground than the dark set. */
	--scd-shadow-1: 0 1px 1px rgba(0, 0, 0, 0.04);
	--scd-shadow-2: 0 1px 3px rgba(0, 0, 0, 0.08);
	--scd-shadow-3: 0 4px 12px rgba(0, 0, 0, 0.10);
	--scd-shadow-4: 0 12px 32px rgba(0, 0, 0, 0.14);
	--scd-shadow-inset: inset 0 1px 0 rgba(0, 0, 0, 0.02);

	color-scheme: light;
}

/* =====================================================================
 * ACCESSIBILITY OVERRIDES
 * ===================================================================== */

/* Honour the OS "reduce motion" setting globally. Because every component
 * transition is expressed via --scd-dur-*, zeroing them here is sufficient;
 * no component needs its own reduced-motion branch. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--scd-dur-fast: 0ms;
		--scd-dur-base: 0ms;
		--scd-dur-slow: 0ms;
	}
}

/* Raise contrast for users who ask for it. --scd-text-subtle on the dark
 * surface is 3.6:1, which fails WCAG AA for body text — it is reserved for
 * large or non-essential text, and lifted to the muted value here. */
@media (prefers-contrast: more) {
	.scd-theme-dark {
		--scd-border: rgba(255, 255, 255, 0.24);
		--scd-border-subtle: rgba(255, 255, 255, 0.16);
		--scd-text-muted: #cbd5e1;
		--scd-text-subtle: #94a3b8;
	}
	.scd-theme-light {
		--scd-border: #8c8f94;
		--scd-border-subtle: #a7aaad;
		--scd-text-muted: #1d2327;
		--scd-text-subtle: #3c434a;
	}
}