/*
 * Design tokens: the one place every value lives (rules M7, A3).
 * Source: project/research/replica-spec.md §1, measured from the live build's compiled CSS
 * (_next/static/chunks/88dc497059bcc644.css). Every token is [M] unless marked otherwise.
 * Components use these variables only; a raw hex/px in a component file is a bug.
 */
:root {
	/* 1.1 Brand colours [M css:--color-*] */
	--color-brand-orange: #ff7400;
	--color-brand-dark: #222222;
	--color-bar-red: #f54040;
	--color-bar-yellow: #fff645;
	--color-bar-blue: #00c8ff;
	--color-bar-green: #7ed321;

	/* 1.2 Palette values in use (computed in Chrome) [M computed] */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-gray-50: #f9fafb;
	--color-gray-100: #f3f4f6;
	--color-gray-200: #e5e7eb;
	--color-gray-300: #d1d5dc;
	--color-gray-400: #99a1af;
	--color-gray-500: #6a7282;
	--color-gray-600: #4a5565;
	--color-gray-700: #364153;
	/* orange-600: Chrome renders the lab() value, which is #f54a00 (not the #f05100 hex fallback) [M computed] */
	--color-orange-600: #f54a00;
	--color-red-500: #fb2c36;
	--color-red-50: #fef2f2;
	--color-red-200: #ffcaca;
	--color-red-700: #bf000f;

	/* Alpha variants used by components [M computed] */
	--color-white-90: rgb(255 255 255 / 0.9);
	--color-white-80: rgb(255 255 255 / 0.8);
	--color-white-70: rgb(255 255 255 / 0.7);
	--color-white-60: rgb(255 255 255 / 0.6);
	--color-white-50: rgb(255 255 255 / 0.5);
	--color-white-40: rgb(255 255 255 / 0.4);
	--color-white-30: rgb(255 255 255 / 0.3);
	--color-white-20: rgb(255 255 255 / 0.2);
	--color-white-15: rgb(255 255 255 / 0.15);
	--color-white-10: rgb(255 255 255 / 0.1);
	--color-white-05: rgb(255 255 255 / 0.05);
	--color-white-95: rgb(255 255 255 / 0.95);
	--color-dark-80: rgb(34 34 34 / 0.8);
	--color-dark-70: rgb(34 34 34 / 0.7);
	--color-dark-60: rgb(34 34 34 / 0.6);
	--color-dark-50: rgb(34 34 34 / 0.5);
	--color-dark-40: rgb(34 34 34 / 0.4);
	--color-dark-30: rgb(34 34 34 / 0.3);
	--color-orange-50a: rgb(255 116 0 / 0.5);
	--color-orange-40a: rgb(255 116 0 / 0.4);
	--color-orange-20a: rgb(255 116 0 / 0.2);
	--color-orange-15a: rgb(255 116 0 / 0.15);
	--color-orange-10a: rgb(255 116 0 / 0.1);
	--color-orange-05a: rgb(255 116 0 / 0.05);
	--color-blue-20a: rgb(0 200 255 / 0.2);
	--color-green-20a: rgb(126 211 33 / 0.2);
	--color-green-05a: rgb(126 211 33 / 0.05);
	--color-red-20a: rgb(245 64 64 / 0.2);
	--color-yellow-30a: rgb(255 246 69 / 0.3);
	--color-yellow-10a: rgb(255 246 69 / 0.1);

	/* 1.3 Type [M css:--font-*, --text-*] — the live site renders in the system stack; no web font is loaded (plan fix). */
	--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	--text-xs: 0.75rem;   --text-xs-lh: 1rem;        /* 12/16 */
	--text-sm: 0.875rem;  --text-sm-lh: 1.25rem;     /* 14/20 */
	--text-base: 1rem;    --text-base-lh: 1.5rem;    /* 16/24 */
	--text-lg: 1.125rem;  --text-lg-lh: 1.75rem;     /* 18/28 */
	--text-xl: 1.25rem;   --text-xl-lh: 1.75rem;     /* 20/28 */
	--text-2xl: 1.5rem;   --text-2xl-lh: 2rem;       /* 24/32 */
	--text-3xl: 1.875rem; --text-3xl-lh: 2.25rem;    /* 30/36 */
	--text-4xl: 2.25rem;  --text-4xl-lh: 2.5rem;     /* 36/40 */
	--text-5xl: 3rem;     --text-5xl-lh: 1;          /* 48/1 */
	--text-6xl: 3.75rem;  --text-6xl-lh: 1;          /* 60/1 */
	--text-7xl: 4.5rem;   --text-7xl-lh: 1;          /* 72/1 */
	--text-8xl: 6rem;     --text-8xl-lh: 1;          /* 96/1 */
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-black: 900;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-2: 0.2em;
	--tracking-3: 0.3em;
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-relaxed: 1.625;
	--leading-display: 1.1;

	/* 1.4 Layout [M css:--spacing, --container-*] */
	--spacing: 0.25rem;
	--container-md: 28rem;   /* 448 */
	--container-xl: 36rem;   /* 576 */
	--container-2xl: 42rem;  /* 672 */
	--container-3xl: 48rem;  /* 768 */
	--container-4xl: 56rem;  /* 896 */
	--container-6xl: 72rem;  /* 1152: the site container */
	--container-7xl: 80rem;  /* 1280 */
	--gutter: 1rem;          /* 16 below 640, 24 from 640, 32 from 1024 (set in base.css) */

	/* Radius [M css:--radius-*] */
	--radius-lg: 0.5rem;   /* 8 */
	--radius-xl: 0.75rem;  /* 12 */
	--radius-2xl: 1rem;    /* 16 */
	--radius-3xl: 1.5rem;  /* 24 */
	--radius-4xl: 2rem;    /* 32: rounded-[2rem] */
	--radius-full: 9999px;

	/* Shadows [M css:.shadow-*] */
	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--blur-sm: 8px;

	/* Motion [M css:--default-transition-*, --ease-out] and GSAP eases mapped to cubic-bezier (spec §5) */
	--duration-fast: 150ms;
	--duration-button: 200ms;
	--duration-base: 300ms;
	--duration-image: 500ms;
	--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-power2-out: cubic-bezier(0.33, 1, 0.68, 1);  /* GSAP power2.out = easeOutCubic */
	--ease-power3-out: cubic-bezier(0.25, 1, 0.5, 1);   /* GSAP power3.out = easeOutQuart */

	/* Header geometry [M computed §4.1, §4.2]. The notice bar is off by default (plan fix 1); body.has-notice-bar sets its height. */
	--header-row: 4rem;     /* 64 below 768, 80 from 768 */
	--notice-h: 0px;
}
/* Resolved on body (not :root): body.has-notice-bar changes --notice-h, and a custom property that references another
   one is computed where it is declared. Declaring this on :root would freeze it at notice-h 0. */
body { --header-h: calc(var(--header-row) + var(--notice-h)); }

@media (min-width: 40rem) {
	:root { --gutter: 1.5rem; }
}
@media (min-width: 48rem) {
	:root { --header-row: 5rem; }
}
@media (min-width: 64rem) {
	:root { --gutter: 2rem; }
}