/*
 * AYHL design tokens.
 *
 * Single source of truth for colour, type, spacing, layout widths, radii,
 * shadows and motion. Shared by the WordPress theme and (later) the React
 * statistics application, so both read as one product.
 *
 * Naming: --ayhl-<group>-<name>. Components should use the semantic tokens
 * (--ayhl-color-*) rather than the raw palette where possible.
 */

:root {
	/* ---- Brand palette (from the AYHL logo and legacy site) ---- */
	--ayhl-blue-50: #eef4fb;
	--ayhl-blue-100: #d8e6f6;
	--ayhl-blue-200: #b0cbeb;
	--ayhl-blue-400: #3b7cc4;
	--ayhl-blue-500: #0055a4; /* AYHL blue */
	--ayhl-blue-600: #004a8f;
	--ayhl-blue-700: #003b73;

	--ayhl-navy-700: #12305c;
	--ayhl-navy-800: #0c2245;
	--ayhl-navy-900: #081834;
	--ayhl-navy-950: #050f22;

	--ayhl-red-50: #fdecee;
	--ayhl-red-500: #e41a37; /* AYHL red */
	--ayhl-red-600: #c8152f;
	--ayhl-red-700: #a7152b;

	--ayhl-gray-0: #ffffff;
	--ayhl-gray-25: #f9fafc;
	--ayhl-gray-50: #f2f5f9;
	--ayhl-gray-100: #e6ebf2;
	--ayhl-gray-200: #d4dce7;
	--ayhl-gray-300: #b9c4d3;
	--ayhl-gray-400: #8b98ac;
	--ayhl-gray-500: #6a7890;
	--ayhl-gray-600: #4f5d74;
	--ayhl-gray-700: #36435a;
	--ayhl-gray-800: #232f45;
	--ayhl-gray-900: #111b2d;

	--ayhl-green-600: #0f7a4b;
	--ayhl-amber-600: #a85c00;

	/* ---- Semantic colour ---- */
	--ayhl-color-bg: var(--ayhl-gray-50);
	--ayhl-color-surface: var(--ayhl-gray-0);
	--ayhl-color-surface-alt: var(--ayhl-gray-25);
	--ayhl-color-surface-sunken: var(--ayhl-gray-50);
	--ayhl-color-surface-dark: var(--ayhl-navy-900);
	--ayhl-color-surface-darker: var(--ayhl-navy-950);

	--ayhl-color-text: var(--ayhl-gray-900);
	--ayhl-color-text-body: var(--ayhl-gray-800);
	--ayhl-color-text-muted: var(--ayhl-gray-600);
	--ayhl-color-text-subtle: var(--ayhl-gray-500);
	--ayhl-color-text-on-dark: #ffffff;
	--ayhl-color-text-on-dark-muted: rgba(255, 255, 255, 0.72);
	--ayhl-color-heading: var(--ayhl-navy-900);

	--ayhl-color-border: var(--ayhl-gray-200);
	--ayhl-color-border-subtle: var(--ayhl-gray-100);
	--ayhl-color-border-strong: var(--ayhl-gray-300);
	--ayhl-color-border-on-dark: rgba(255, 255, 255, 0.14);

	--ayhl-color-primary: var(--ayhl-blue-500);
	--ayhl-color-primary-hover: var(--ayhl-blue-600);
	--ayhl-color-primary-active: var(--ayhl-blue-700);
	--ayhl-color-primary-tint: var(--ayhl-blue-50);
	--ayhl-color-accent: var(--ayhl-red-500);
	--ayhl-color-accent-hover: var(--ayhl-red-600);
	--ayhl-color-accent-tint: var(--ayhl-red-50);

	--ayhl-color-link: var(--ayhl-blue-500);
	--ayhl-color-link-hover: var(--ayhl-blue-700);
	--ayhl-color-focus: #2f80ff;

	--ayhl-color-success: var(--ayhl-green-600);
	--ayhl-color-warning: var(--ayhl-amber-600);
	--ayhl-color-danger: var(--ayhl-red-700);
	--ayhl-color-info: var(--ayhl-blue-500);

	/* ---- Typography ---- */
	--ayhl-font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
	--ayhl-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ayhl-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

	--ayhl-text-2xs: 0.6875rem; /* 11 */
	--ayhl-text-xs: 0.75rem;    /* 12 */
	--ayhl-text-sm: 0.875rem;   /* 14 */
	--ayhl-text-base: 1rem;     /* 16 */
	--ayhl-text-md: 1.0625rem;  /* 17 */
	--ayhl-text-lg: 1.25rem;    /* 20 */
	--ayhl-text-xl: 1.5rem;     /* 24 */
	--ayhl-text-2xl: clamp(1.75rem, 1.45rem + 1vw, 2.25rem);
	--ayhl-text-3xl: clamp(2.125rem, 1.6rem + 2vw, 3rem);
	--ayhl-text-4xl: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
	--ayhl-text-5xl: clamp(3rem, 1.8rem + 4.8vw, 5.5rem);

	--ayhl-leading-none: 0.95;
	--ayhl-leading-tight: 1.05;
	--ayhl-leading-snug: 1.3;
	--ayhl-leading-normal: 1.6;
	--ayhl-leading-relaxed: 1.72;

	--ayhl-tracking-display: 0.01em;
	--ayhl-tracking-caps: 0.06em;
	--ayhl-tracking-label: 0.1em;

	/* ---- Spacing (4px base) ---- */
	--ayhl-space-1: 0.25rem;
	--ayhl-space-2: 0.5rem;
	--ayhl-space-3: 0.75rem;
	--ayhl-space-4: 1rem;
	--ayhl-space-5: 1.25rem;
	--ayhl-space-6: 1.5rem;
	--ayhl-space-8: 2rem;
	--ayhl-space-10: 2.5rem;
	--ayhl-space-12: 3rem;
	--ayhl-space-16: 4rem;
	--ayhl-space-20: 5rem;
	--ayhl-section-y: clamp(3rem, 2rem + 4vw, 5.5rem);

	/* ---- Layout widths ---- */
	--ayhl-w-prose: 46rem;     /* 736px  — reading width */
	--ayhl-w-content: 80rem;   /* 1280px — standard page content */
	--ayhl-w-app: 90rem;       /* 1440px — site shell + data application */
	--ayhl-gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
	--ayhl-sidebar: 17.5rem;

	/* ---- Shape ---- */
	--ayhl-radius-xs: 2px;
	--ayhl-radius-sm: 4px;
	--ayhl-radius-md: 8px;
	--ayhl-radius-lg: 12px;
	--ayhl-radius-pill: 999px;

	/* ---- Elevation ---- */
	--ayhl-shadow-xs: 0 1px 2px rgba(8, 24, 52, 0.06);
	--ayhl-shadow-sm: 0 1px 3px rgba(8, 24, 52, 0.08), 0 1px 2px rgba(8, 24, 52, 0.04);
	--ayhl-shadow-md: 0 8px 20px -8px rgba(8, 24, 52, 0.18), 0 2px 6px -2px rgba(8, 24, 52, 0.08);
	--ayhl-shadow-lg: 0 24px 48px -16px rgba(8, 24, 52, 0.32), 0 4px 12px -4px rgba(8, 24, 52, 0.12);
	--ayhl-ring: 0 0 0 3px rgba(47, 128, 255, 0.35);

	/* ---- Motion ---- */
	--ayhl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ayhl-duration-fast: 120ms;
	--ayhl-duration: 200ms;
	--ayhl-duration-slow: 320ms;

	/* ---- Layers ---- */
	--ayhl-z-dropdown: 50;
	--ayhl-z-header: 100;
	--ayhl-z-overlay: 190;
	--ayhl-z-drawer: 200;

	/* ---- Component tokens ---- */
	--ayhl-header-height: 4.75rem;
	--ayhl-header-height-compact: 3.75rem;
	--ayhl-control-height: 2.75rem;
	--ayhl-control-height-sm: 2.25rem;

	--ayhl-table-font-size: 0.9375rem;
	--ayhl-table-cell-y: 0.7rem;
	--ayhl-table-cell-x: 0.75rem;
	--ayhl-table-head-bg: var(--ayhl-gray-25);
	--ayhl-table-head-color: var(--ayhl-gray-600);
	--ayhl-table-head-rule: var(--ayhl-navy-900);
	--ayhl-table-row-rule: var(--ayhl-gray-100);
	--ayhl-table-row-hover: #f5f8fd;
	--ayhl-table-stripe: var(--ayhl-gray-25);
	--ayhl-table-sorted-bg: rgba(0, 85, 164, 0.055);
	--ayhl-table-sticky-bg: var(--ayhl-gray-0);
}