/*
 * poea-native design tokens.
 * Raw palette = --pn-*, semantic = --color-*, everything else by family.
 * Contrast notes (WCAG 2.2, checked against #fff / --pn-soft / --pn-ink):
 *   text-safe on white: brand-500+ (6.8:1), accent-800+ (5.7:1), gray-500+ (5.3:1), all status colours (>=5:1).
 *   NOT for text: brand-300/400, accent-400..700, gray-300/400 (decoration, borders, icons next to a label only).
 *   gray-400 #8a899c is the minimum for control borders (3.4:1 on white, 3.1:1 on soft; WCAG 1.4.11).
 * Breakpoints (custom properties cannot be used inside @media, so use the literal values):
 *   sm 640px · md 768px · lg 1024px · xl 1280px. Mobile first: @media (min-width: 640px) { ... }.
 */
:root {
	/* Brand (POEA): base values from the live site. */
	--pn-brand: #303af7;
	--pn-ink: #2f2e41;
	--pn-ink-2: #3f3d56;
	--pn-accent: #00b0ff;
	--pn-soft: #f4f5fb;
	--pn-line: #e3e5f0;
	--pn-muted: #6b6a7d;
	--pn-white: #fff;

	/* Brand scale: 50-400 tint toward white, 600-900 shade toward #0b0d3a. */
	--pn-brand-50: #f5f5ff; --pn-brand-100: #e6e7fe; --pn-brand-200: #cdd0fd; --pn-brand-300: #a8acfc; --pn-brand-400: #6e75f9;
	--pn-brand-500: #303af7; --pn-brand-600: #2932d5; --pn-brand-700: #232bb7; --pn-brand-800: #1e2498; --pn-brand-900: #181c7a;

	/* Accent scale (sky). Base #00b0ff is 2.4:1 on white: decoration only, never text. */
	--pn-accent-50: #f2fbff; --pn-accent-100: #e0f6ff; --pn-accent-200: #c2ecff; --pn-accent-300: #94deff; --pn-accent-400: #4cc8ff;
	--pn-accent-500: #00b0ff; --pn-accent-600: #0098dc; --pn-accent-700: #0182bd; --pn-accent-800: #016d9e; --pn-accent-900: #01587f;

	/* Neutral scale built around the POEA greys. */
	--pn-gray-50: #f9f9fc;
	--pn-gray-100: #f4f5fb; /* = soft */
	--pn-gray-200: #e3e5f0; /* = line */
	--pn-gray-300: #c9cbdb;
	--pn-gray-400: #8a899c; /* control border */
	--pn-gray-500: #6b6a7d; /* = muted, 5.3:1 */
	--pn-gray-600: #55546a;
	--pn-gray-700: #3f3d56; /* = ink-2 */
	--pn-gray-800: #2f2e41; /* = ink */
	--pn-gray-900: #1d1c2a;

	/* Status: text colour + tint background (text on tint >= 4.5:1). */
	--pn-success: #15803d;
	--pn-success-bg: #ecf5ef;
	--pn-warning: #a15c00;
	--pn-warning-bg: #f8f1e6;
	--pn-danger: #c62828;
	--pn-danger-bg: #fbeeee;
	--pn-info: #0369a1;
	--pn-info-bg: #ebf3f7;

	/* Semantic */
	--color-text: var(--pn-ink);
	--color-text-2: var(--pn-ink-2);
	--color-text-muted: var(--pn-muted);
	--color-text-inverse: #fff;
	--color-heading: var(--pn-ink);
	--color-bg: var(--pn-soft);
	--color-surface: #fff;
	--color-surface-2: var(--pn-gray-50);
	--color-surface-tint: var(--pn-brand-50);
	--color-border: var(--pn-line);
	--color-border-strong: var(--pn-gray-400);
	--color-link: var(--pn-brand-500);
	--color-link-hover: var(--pn-brand-700);
	--color-primary: var(--pn-brand-500);
	--color-primary-hover: var(--pn-brand-600);
	--color-primary-active: var(--pn-brand-700);
	--color-on-primary: #fff;
	--color-accent: var(--pn-accent-500);
	--color-accent-text: var(--pn-accent-800);
	--color-focus: var(--pn-brand-500);
	--color-selection: rgb(48 58 247 / 0.2);
	--color-success: var(--pn-success);
	--color-success-bg: var(--pn-success-bg);
	--color-warning: var(--pn-warning);
	--color-warning-bg: var(--pn-warning-bg);
	--color-danger: var(--pn-danger);
	--color-danger-bg: var(--pn-danger-bg);
	--color-info: var(--pn-info);
	--color-info-bg: var(--pn-info-bg);

	/* Typography */
	--font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--fs-12: 0.75rem;   --lh-12: 1.125rem;  /* 12/18 meta, eyebrow */
	--fs-13: 0.8125rem; --lh-13: 1.25rem;   /* 13/20 small */
	--fs-14: 0.875rem;  --lh-14: 1.5rem;    /* 14/24 UI, excerpt */
	--fs-16: 1rem;      --lh-16: 1.625rem;  /* 16/26 body */
	--fs-18: 1.125rem;  --lh-18: 1.75rem;   /* 18/28 lead, panel h */
	--fs-20: 1.25rem;   --lh-20: 1.75rem;   /* 20/28 */
	--fs-24: 1.5rem;    --lh-24: 2rem;      /* 24/32 h2 sub */
	--fs-30: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);  --lh-30: 1.25;  /* 24 -> 30 */
	--fs-36: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem); --lh-36: 1.2;   /* 28 -> 36 */
	--fs-48: clamp(2rem, 1.4rem + 2.4vw, 3rem);        --lh-48: 1.15;  /* 32 -> 48 */
	--tracking-tight: -0.02em;
	--tracking-eyebrow: 0.08em;

	/* Spacing, 4px base */
	--space-0: 0;
	--space-1: 0.25rem;  /* 4 */
	--space-2: 0.5rem;   /* 8 */
	--space-3: 0.75rem;  /* 12 */
	--space-4: 1rem;     /* 16 */
	--space-5: 1.25rem;  /* 20 */
	--space-6: 1.5rem;   /* 24 */
	--space-8: 2rem;     /* 32 */
	--space-10: 2.5rem;  /* 40 */
	--space-12: 3rem;    /* 48 */
	--space-16: 4rem;    /* 64 */
	--space-20: 5rem;    /* 80 */
	--space-24: 6rem;    /* 96 */
	--section-y: var(--space-12);  /* 48 mobile; 64 at md, see base.css */

	/* Radii */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-rest: 0 1px 2px rgb(47 46 65 / 0.06), 0 1px 3px rgb(47 46 65 / 0.04);
	--shadow-hover: 0 10px 32px rgb(48 58 247 / 0.08), 0 4px 12px rgb(47 46 65 / 0.06);
	--shadow-pop: 0 16px 48px rgb(47 46 65 / 0.16), 0 4px 12px rgb(47 46 65 / 0.08);
	--shadow-header: 0 1px 0 var(--pn-line), 0 4px 16px rgb(47 46 65 / 0.04);
	--ring: 0 0 0 3px rgb(48 58 247 / 0.2);
	--focus-outline: 2px solid var(--color-focus);
	--focus-offset: 2px;

	/* Layout */
	--container: 1280px;
	--container-detail: 1024px;
	--measure: 68ch;
	--gutter: 16px; /* 24px >= 640, 32px >= 1024 (set in base.css) */
	--header-h: 64px;
	--sticky-top: calc(var(--header-h) + var(--space-6));
	--control-h: 44px;
	--control-h-sm: 36px;
	--tap: 44px;

	/* Z-index */
	--z-base: 1;
	--z-sticky: 20;
	--z-header: 50;
	--z-drawer: 80;
	--z-modal: 100;
	--z-toast: 120;

	/* Motion */
	--dur-fast: 150ms;
	--dur: 200ms;
	--dur-slow: 300ms;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* Cariera plugin compat (04 Cariera Dependency List, A7). Read by cariera-addons/-packages CSS. */
	--cariera-primary: var(--pn-brand);
	--cariera-dark-text-color: var(--pn-ink);
	--cariera-border-color: var(--pn-line);
	--cariera-light-grey-color: var(--pn-soft);
	--cariera-grey-color: var(--pn-muted);
	--cariera-white-color: #fff;
	--cariera-error-color: var(--pn-danger);
	--cariera-success-color: var(--pn-success);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur: 0ms;
		--dur-slow: 0ms;
	}
}