/*
 * Design tokens — PerformOS brand colours, typography, spacing.
 * Mirrors the original perform-os child theme (Bootstrap variables) so the
 * rebuilt site is pixel-faithful. Change a value here and it cascades.
 */
:root {
	/* Brand palette */
	--pos-primary: #0ea5e9;      /* Electric blue */
	--pos-secondary: #8b5cf6;    /* Purple */
	--pos-accent: #06b6d4;       /* Cyan */
	--pos-dark: #030213;         /* Near-black navy (headings/body) */
	--pos-navy: #07152f;         /* Footer / dark banners */
	--pos-light: #f9fafb;        /* Light section background */
	--pos-light-grey: #eaeced;   /* Grey section background */
	--pos-pale-cyan: #e6f8fb;    /* Pale cyan section background */
	--pos-primary-subtle: #cfedfb; /* primary-bg-subtle (eyebrow/icon backgrounds) */
	--pos-white: #ffffff;

	/* Greys (Bootstrap scale, used for borders/muted text) */
	--pos-grey-100: #f8f9fa;
	--pos-grey-200: #e9ecef;
	--pos-grey-300: #dee2e6;
	--pos-grey-500: #adb5bd;
	--pos-grey-600: #6c757d;
	--pos-grey-700: #495057;

	/* Gradient used for highlighted headings, gradient cards and step numbers */
	--pos-gradient: linear-gradient(135deg, var(--pos-primary), var(--pos-secondary));

	/* Semantic */
	--color-text: #212529;
	--color-heading: var(--pos-dark);
	--color-muted: var(--pos-grey-700);
	--color-bg: var(--pos-white);
	--color-link: var(--pos-primary);
	--color-link-hover: #0b84ba;
	--color-border: var(--pos-grey-300);

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

	--fs-body: 1rem;          /* 16px */
	--fs-small: 0.875rem;     /* 14px */
	--fs-lead: 1.125rem;      /* 18px */
	--lh-base: 1.6;
	--lh-heading: 1.2;

	/* Fluid heading sizes (desktop: h1 3.5rem, h2 2.5rem, h3 1.75rem) */
	--fs-h1: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
	--fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	--fs-h3: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
	--fs-h4: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);

	/* Layout */
	--container-max: 1320px;
	--container-medium: 1140px;
	--container-narrow: 860px;
	--container-blog: 900px;   /* blog article reading column (.pos-content) */
	--gutter: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
	--section-py: clamp(3rem, 2rem + 3vw, 5rem);
	--col-gap: clamp(2rem, 1rem + 3vw, 5rem); /* split layouts (was --bs-gutter-x: 5rem) */

	/* Effects */
	--radius-sm: 8px;
	--radius-md: 12px;   /* buttons */
	--radius-lg: 16px;   /* cards, images */
	--radius-xl: 20px;   /* list cards, review cards */
	--radius-pill: 50px;
	--shadow-card: 0 14px 28px rgba(11, 18, 32, 0.08);
	--shadow-soft: 0 16px 34px rgba(3, 2, 19, 0.14);
	--shadow-glow: 0 4px 16px 10px rgba(14, 165, 233, 0.3);

	--header-height: 64px;
	--notice-height: 48px;
	--transition: 200ms ease;
}