/* ==========================================================================
   Design System — CSS Custom Properties
   ========================================================================== */

:root {
	/* ── Colour Palette ─────────────────────────────────────────────── */
	--color-primary:          #0F6B5E;
	--color-primary-light:    #E8F5F2;
	--color-primary-dark:     #0A4F45;
	--color-secondary:        #F5A623;
	--color-dark:             #1A1A2E;
	--color-text:             #4A4A68;
	--color-text-light:       #8A8AA3;
	--color-border:           #E8E8EF;
	--color-background:       #FFFFFF;
	--color-background-alt:   #F8F9FC;
	--color-success:          #22C55E;
	--color-error:            #EF4444;

	/* ── Typography ─────────────────────────────────────────────────── */
	--font-heading:  'Plus Jakarta Sans', sans-serif;
	--font-body:     'Inter', sans-serif;

	/* Type Scale — mobile-first defaults (scaled up at 768px) */
	--text-hero:   2.25rem;
	--lh-hero:     1.15;
	--text-h1:     1.75rem;
	--lh-h1:       1.25;
	--text-h2:     1.5rem;
	--lh-h2:       1.3;
	--text-h3:     1.125rem;
	--lh-h3:       1.4;
	--text-body:   1rem;
	--lh-body:     1.6;
	--text-small:  0.875rem;
	--lh-small:    1.5;
	--text-xs:     0.75rem;
	--lh-xs:       1.5;

	/* ── Spacing Scale ──────────────────────────────────────────────── */
	--space-xs:   0.25rem;   /*  4px */
	--space-sm:   0.5rem;    /*  8px */
	--space-md:   1rem;      /* 16px */
	--space-lg:   1.5rem;    /* 24px */
	--space-xl:   2rem;      /* 32px */
	--space-2xl:  3rem;      /* 48px */
	--space-3xl:  4rem;      /* 64px */
	--space-4xl:  6rem;      /* 96px */

	/* ── Border Radius ──────────────────────────────────────────────── */
	--radius-sm:    6px;
	--radius-md:    12px;
	--radius-lg:    16px;
	--radius-xl:    24px;
	--radius-pill:  999px;
	--radius-full:  50%;

	/* ── Shadows ────────────────────────────────────────────────────── */
	--shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.06);
	--shadow-md:     0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg:     0 8px 30px rgba(0, 0, 0, 0.12);
	--shadow-hover:  0 12px 40px rgba(0, 0, 0, 0.15);

	/* ── Transitions ────────────────────────────────────────────────── */
	--transition-fast:  150ms ease;
	--transition-base:  250ms ease;
	--transition-slow:  400ms ease;

	/* ── Breakpoints (reference only — use in @media rules) ─────────── */
	/* --bp-sm:  640px   */
	/* --bp-md:  768px   */
	/* --bp-lg:  1024px  */
	/* --bp-xl:  1280px  */
	/* --bp-2xl: 1440px  */

	/* ── Layout ─────────────────────────────────────────────────────── */
	--container-max:     1280px;
	--container-padding: var(--space-lg);  /* 24px on mobile */
}

/* ── Desktop type scale ────────────────────────────────────────────────── */

@media (min-width: 768px) {
	:root {
		--text-hero:   3.5rem;
		--lh-hero:     1.1;
		--text-h1:     2.5rem;
		--lh-h1:       1.2;
		--text-h2:     1.75rem;
		--lh-h2:       1.3;
	}
}