/* ==========================================================================
   ConvergedHub — design tokens
   Ported verbatim from the design system (_ds/tokens/*.css) and the site
   theme override ("Frontier Light"). The original custom-property names are
   preserved so every ported rule keeps its exact computed value; theme.json
   mirrors the same values into --wp--preset--* for the block editor.
   ========================================================================== */

:root {
	/* ---- Accent (brand hue) ---- */
	--accent: #2464e8;
	--accent-strong: #1b4fc4;
	--accent-bright: #3b82f6;
	--accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
	--accent-ring: color-mix(in srgb, var(--accent) 18%, transparent);
	--accent-border: color-mix(in srgb, var(--accent) 38%, transparent);
	--accent-on: #ffffff;

	/* Secondary brand hues used by gradients and product colouring */
	--violet: #7c5bd6;
	--violet-soft: #9b6be0;
	--violet-bright: #7c5cfc;
	--indigo: #5b5bd6;

	/* ---- Neutral surfaces ---- */
	--bg: #eef1f7;
	--surface: #f8fafd;
	--card: #ffffff;
	--input: #f8fafd;
	--input-hover: #edf1f8;

	/* ---- Borders ---- */
	--border: rgba(16, 24, 48, 0.07);
	--border-strong: rgba(16, 24, 48, 0.12);

	/* ---- Text ---- */
	--text: #0f1420;
	--text-2: #4c5566;
	/* Muted text: was #8d97a8 (2.6–2.9:1); darkened to pass 4.5:1 on --card, --surface and --bg (Venu, 12 Nov 2026). */
	--text-3: #626d80;

	/* ---- Navigation surfaces ---- */
	--nav-active: #ffffff;
	--nav-hover: rgba(17, 17, 26, 0.04);

	/* ---- Status ---- */
	--success: #2e9d6b;
	--warning: #e38a1f;
	--danger: #d0544f;
	--success-fg: color-mix(in oklab, var(--success), black 14%);
	--warning-fg: color-mix(in oklab, var(--warning), black 14%);
	--danger-fg: color-mix(in oklab, var(--danger), black 14%);
	--success-soft: color-mix(in srgb, var(--success) 13%, transparent);
	--warning-soft: color-mix(in srgb, var(--warning) 13%, transparent);
	--danger-soft: color-mix(in srgb, var(--danger) 13%, transparent);
	--danger-ring: color-mix(in srgb, var(--danger) 18%, transparent);

	/* ---- Deep ink band — full-width dark sections and the closing CTA ---- */
	--ink: #08090f;
	--ink-2: #12141d;
	--ink-text: #f4f6fa;
	--ink-text-2: #a7b0c2;
	--ink-border: rgba(255, 255, 255, 0.1);

	/* ---- Tooltip / inverse / code ---- */
	--tip-bg: #1a1a21;
	--tip-fg: #ffffff;
	--code-bg: #fbfbfc;

	/* ---- Typography ---- */
	--font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--type-title-size: 32px;
	--type-title-weight: 600;
	--type-title-line: 38px;
	--type-title-tracking: -0.32px;
	--type-section-size: 22px;
	--type-section-weight: 600;
	--type-section-line: 28px;
	--type-section-tracking: -0.11px;
	--type-subsection-size: 18px;
	--type-subsection-weight: 600;
	--type-subsection-line: 24px;
	--type-body-size: 15px;
	--type-body-weight: 400;
	--type-body-line: 24px;
	--type-secondary-size: 14px;
	--type-secondary-weight: 400;
	--type-secondary-line: 22px;
	--type-meta-size: 13px;
	--type-meta-weight: 500;
	--type-caption-size: 12px;
	--type-caption-weight: 500;
	--type-caption-tracking: 0.48px;

	/* ---- Spacing (8-point grid) ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--content-max: 960px;
	--content-max-wide: 1320px;
	--page-pad: 64px;

	/* ---- Radius ---- */
	--radius-checkbox: 6px;
	--radius-menu: 8px;
	--radius-icon: 10px;
	--radius-control: 12px;
	--radius-card: 16px;
	--radius-pill: 999px;

	/* ---- Elevation ---- */
	--shadow-card: 0 1px 2px rgba(17, 17, 26, 0.04), 0 8px 24px -12px rgba(17, 17, 26, 0.1);
	--shadow-drop: 0 4px 12px -2px rgba(17, 17, 26, 0.1), 0 12px 28px -8px rgba(17, 17, 26, 0.14);
	--shadow-dialog: 0 12px 40px -10px rgba(17, 17, 26, 0.22);
	--scrim: rgba(17, 17, 26, 0.4);

	/* ---- Motion ---- */
	--dur-fast: 120ms;
	--dur-base: 150ms;
	--dur-slow: 220ms;
	--dur-pop: 260ms;
	--ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--press-scale: 0.97;
}

/* Dark regions (scoped bands, dark CTA) keep the brand blue rather than the
   design system's default indigo. */
:root[data-theme="dark"],
[data-theme="dark"] {
	--accent: #4c8cf8;
	--accent-soft: color-mix(in srgb, #2464e8 22%, transparent);
	--accent-ring: color-mix(in srgb, #4c8cf8 26%, transparent);
	--accent-border: color-mix(in srgb, #4c8cf8 52%, transparent);
	--accent-on: #061024;

	--bg: #141417;
	--surface: #0f0f12;
	--card: #1c1c22;
	--input: #232329;
	--input-hover: #2a2a31;

	--border: rgba(255, 255, 255, 0.07);
	--border-strong: rgba(255, 255, 255, 0.11);

	--text: #ececef;
	--text-2: #9c9ca6;
	/* Was #6e6e78 (3.4–3.8:1); now 5:1 on the dark backgrounds, still below --text-2. */
	--text-3: #8a8a95;

	--nav-active: #26262d;
	--nav-hover: rgba(255, 255, 255, 0.045);

	--success-fg: color-mix(in oklab, var(--success), white 28%);
	--warning-fg: color-mix(in oklab, var(--warning), white 28%);
	--danger-fg: color-mix(in oklab, var(--danger), white 28%);
	--success-soft: color-mix(in srgb, var(--success) 22%, transparent);
	--warning-soft: color-mix(in srgb, var(--warning) 22%, transparent);
	--danger-soft: color-mix(in srgb, var(--danger) 22%, transparent);
	--danger-ring: color-mix(in srgb, var(--danger) 26%, transparent);

	--tip-bg: #33333d;
	--tip-fg: #ececef;
	--code-bg: #161619;
}

/* Elevation follows only a fully dark page, as in the design system's
   elevation tokens: a dark band inside a light page (the closing CTA, the
   heroes) keeps the light shadows. */
:root[data-theme="dark"] {
	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
	--shadow-drop: 0 8px 28px -8px rgba(0, 0, 0, 0.55);
	--shadow-dialog: 0 16px 48px -12px rgba(0, 0, 0, 0.7);
	--scrim: rgba(0, 0, 0, 0.55);
}