/*
 * Choose Speed design tokens. Source of truth: docs/BRAND.md (v5, 12a) and the approved V3 prototypes.
 * No colour literal (hex, rgb, hsl, named) belongs outside this file (`php artisan check:tokens`).
 * Theme model (V3): the page is dark by default; any element can switch scope with
 * .th-light / .th-dark / .th-deep or [data-theme="light|dark"]. Put data-theme="light" on <html> for a light page.
 * V3 keeps its own display and body scale (--fs-d1, --fs-d2, --fs-h3, --fs-b, --fs-lead); the 12a scale below
 * adds the sizes V3 does not define. Where both exist, V3 wins (BRAND 13).
 */
:root {
	/* palette (BRAND 3, 12a) */
	--ink-950: #05070d;
	--ink-900: #0a0f1c;
	--ink-800: #111a2e;
	--ink-700: #1a2540;
	--blue-50: #eef4ff;
	--blue-100: #dce8ff;
	--blue-300: #8db3ff;
	--blue-500: #2a63fa;
	--blue-600: #1f52e0;
	--blue-700: #1a41b5;
	--blue-900: #0e2466;
	--gold-100: #fbf1d3;
	--gold-300: #f2d27a;
	--gold-500: #d9a441;
	--gold-600: #b5811b;
	--gold-700: #8c6120;
	--gray-50: #f6f8fc;
	--gray-100: #e8ecf4;
	--gray-300: #b9c2d3;
	--gray-600: #566277;
	--gray-700: #3a4458;
	--white: #fff;
	--text-soft: #c5cde0;
	--success: #1fa971;
	--warning: #f0b429;
	--danger: #eb5257;

	/* logo artwork only, never for UI */
	--logo-gold-hi: #fcd340;
	--logo-gold-mid: #e7ac22;
	--logo-gold-lo: #d48d05;
	--logo-blue-hi: #2062f9;
	--logo-blue-mid: #144fe1;
	--logo-blue-lo: #0d3bc3;

	/* channel triplets: for rgb(var(--x) / alpha) in CSS and rgba() built in canvas code */
	--ink-950-rgb: 5 7 13;
	--ink-900-rgb: 10 15 28;
	--blue-300-rgb: 141 179 255;
	--blue-500-rgb: 42 99 250;
	--gold-300-rgb: 242 210 122;
	--gold-500-rgb: 217 164 65;
	--white-rgb: 255 255 255;
	--black-rgb: 0 0 0;

	/* type */
	--font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
	--font-text: "Manrope", "Segoe UI", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
	--font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;

	--fs-d1: clamp(68px, 12.4vw, 200px);
	--fs-d2: clamp(40px, 6.4vw, 104px);
	--fs-h1: clamp(32px, 23.5px + 2.25vw, 56px);
	--fs-h2: clamp(28px, 23.8px + 1.13vw, 40px);
	--fs-h3: clamp(24px, 2.2vw, 34px);
	--fs-h4: clamp(18px, 17.3px + 0.19vw, 20px);
	--fs-lead: clamp(17px, 1.3vw, 21px);
	--fs-bl: clamp(19px, 18.3px + 0.19vw, 21px);
	--fs-b: clamp(16px, 1.1vw, 18px);
	--fs-s: 14px;
	--fs-m: 12px;
	--fs-label: 12px;
	--fs-num: clamp(56px, 36.7px + 5.15vw, 112px);
	--fs-bl-ar: clamp(20px, 19.3px + 0.19vw, 22px);
	--fs-b-ar: clamp(17px, 16.3px + 0.19vw, 19px);
	--fs-s-ar: 15px;
	--lh-ar-extra: 0.15;

	/* space and layout */
	--sp-0: 0;
	--sp-2: 2px;
	--sp-4: 4px;
	--sp-8: 8px;
	--sp-12: 12px;
	--sp-16: 16px;
	--sp-24: 24px;
	--sp-32: 32px;
	--sp-48: 48px;
	--sp-64: 64px;
	--sp-96: 96px;
	--sp-128: 128px;
	--sp-192: 192px;
	--margin: clamp(20px, 4.2vw, 72px);
	--container: 1400px;
	--rail: max(var(--margin), calc((100vw - var(--container)) / 2));
	--sec: clamp(96px, 13vw, 200px);

	/* shape and depth (V3: plates and chamfered buttons) */
	--radius-control: 4px;
	--radius-plate: 3px;
	--hairline: 1px;
	--focus-width: 2px;
	--focus-offset: 3px;
	--cut: 14px;
	--lean: 12deg;
	--edge-light: inset 0 1px 0 rgb(var(--white-rgb) / 0.28);
	--edge-dark: inset 0 -2px 0 rgb(var(--black-rgb) / 0.24);
	--edge-press: inset 0 2px 0 rgb(var(--black-rgb) / 0.28);
	--glow: 0 0 40px rgb(var(--blue-500-rgb) / 0.25);

	/* motion */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
	--d-instant: 100ms;
	--d-fast: 220ms;
	--d-base: 700ms;
	--d-slow: 1100ms;
	--d-draw: 900ms;
	--stagger: 55ms;
	--dir: 1;

	/* semantic, dark default */
	--bg: var(--ink-950);
	--bg-alt: var(--ink-900);
	--fg: var(--white);
	--fg2: var(--gray-300);
	--ln: rgb(var(--blue-300-rgb) / 0.15);
	--ln-s: rgb(var(--blue-300-rgb) / 0.34);
	--ln-ctl: rgb(var(--blue-300-rgb) / 0.5);
	--acc: var(--blue-500);
	--acc-t: var(--blue-300);
	--hi: var(--gold-300);
	--on-acc: var(--white);
	--surface: rgb(17 26 46 / 0.62);
	--surface-solid: var(--ink-800);
	--focus: var(--gold-300);
	--ok: var(--success);
	--bad: var(--danger);
	--warn: var(--warning);
	--product-accent: var(--blue-500);
	--product-accent-soft: var(--ink-700);
	--svc-teal: #14b8a6;
	--svc-teal-t: #5ee0cf;
	--svc-violet: #8b6cf6;
	--svc-violet-t: #bba8ff;
	--svc-pink: #e4589a;
	--svc-pink-t: #ff9cc8;
	--svc-coral: #f2784b;
	--svc-coral-t: #ffab8a;
	--svc-lime: #8cc63f;
	--svc-lime-t: #c0ec7c;
	--svc-green: #2fbf71;
	--svc-green-t: #7be8a8;
	--field-bg: rgb(var(--ink-950-rgb) / 0.7);
	--bad-t: #ff7a7f;
	--bad-wash: rgb(235 82 87 / 0.1);
	--ok-wash: rgb(31 169 113 / 0.1);
	--hi-wash: rgb(var(--gold-300-rgb) / 0.1);

	/* hero atmosphere and instruments */
	--glow-blue: rgb(var(--blue-500-rgb) / 0.34);
	--glow-gold: rgb(var(--gold-500-rgb) / 0.18);
	--glass: rgb(var(--ink-950-rgb) / 0.55);
	--gold-wash: rgb(var(--gold-300-rgb) / 0.1);
	--dim-soft: rgb(var(--white-rgb) / 0.5);
	--grid-line: rgb(var(--white-rgb) / 0.06);
	--field-speed:
		radial-gradient(ellipse 55% 70% at 100% 0%, var(--blue-500) 0%, rgb(var(--blue-500-rgb) / 0) 100%),
		radial-gradient(ellipse 40% 50% at 0% 100%, rgb(var(--gold-500-rgb) / 0.28) 0%, rgb(var(--gold-500-rgb) / 0) 100%),
		linear-gradient(160deg, var(--blue-900) 0%, var(--ink-950) 72%);
}

html[dir="rtl"] {
	--dir: -1;
}

.th-light,
[data-theme="light"] {
	--bg: var(--gray-50);
	--bg-alt: var(--white);
	--fg: var(--ink-900);
	--fg2: var(--gray-600);
	--ln: rgb(var(--ink-900-rgb) / 0.13);
	--ln-s: rgb(var(--ink-900-rgb) / 0.34);
	--ln-ctl: rgb(var(--ink-900-rgb) / 0.55);
	--acc: var(--blue-600);
	--acc-t: var(--blue-600);
	--hi: var(--gold-700);
	--surface: rgb(var(--white-rgb) / 0.78);
	--surface-solid: var(--white);
	--focus: var(--blue-600);
	--ok: #0f7a52;
	--bad: #c23338;
	--warn: #8a5b00;
	--product-accent: var(--blue-600);
	--product-accent-soft: var(--blue-50);
	--field-bg: var(--white);
	--bad-t: #c23338;
	--bad-wash: rgb(194 51 56 / 0.08);
	--ok-wash: rgb(15 122 82 / 0.08);
	--hi-wash: rgb(140 97 32 / 0.1);
	--grid-line: rgb(var(--ink-900-rgb) / 0.06);
	--dim-soft: rgb(var(--ink-900-rgb) / 0.5);
}

.th-dark,
[data-theme="dark"],
[data-theme="light"] .hdr.on-dark {
	--bg: var(--ink-950);
	--bg-alt: var(--ink-900);
	--fg: var(--white);
	--fg2: var(--gray-300);
	--ln: rgb(var(--blue-300-rgb) / 0.15);
	--ln-s: rgb(var(--blue-300-rgb) / 0.34);
	--ln-ctl: rgb(var(--blue-300-rgb) / 0.5);
	--acc: var(--blue-500);
	--acc-t: var(--blue-300);
	--hi: var(--gold-300);
	--surface: rgb(17 26 46 / 0.62);
	--surface-solid: var(--ink-800);
	--focus: var(--gold-300);
	--ok: var(--success);
	--bad: var(--danger);
	--warn: var(--warning);
	--product-accent: var(--blue-500);
	--product-accent-soft: var(--ink-700);
	--svc-teal: #14b8a6;
	--svc-teal-t: #5ee0cf;
	--svc-violet: #8b6cf6;
	--svc-violet-t: #bba8ff;
	--svc-pink: #e4589a;
	--svc-pink-t: #ff9cc8;
	--svc-coral: #f2784b;
	--svc-coral-t: #ffab8a;
	--svc-lime: #8cc63f;
	--svc-lime-t: #c0ec7c;
	--svc-green: #2fbf71;
	--svc-green-t: #7be8a8;
	--field-bg: rgb(var(--ink-950-rgb) / 0.7);
	--bad-t: #ff7a7f;
	--bad-wash: rgb(235 82 87 / 0.1);
	--ok-wash: rgb(31 169 113 / 0.1);
	--hi-wash: rgb(var(--gold-300-rgb) / 0.1);
	--grid-line: rgb(var(--white-rgb) / 0.06);
	--dim-soft: rgb(var(--white-rgb) / 0.5);
}

.th-deep {
	--bg: var(--blue-900);
}