/* ==========================================================================
   Design Tokens — Abilities Centre
   All theme variables live here. Change once, affects everything.
   ========================================================================== */

:root {
	/* ------------------------------------------------------------------
	   Brand colours
	   ------------------------------------------------------------------ */
	--ac-color-primary:         #002F86;
	--ac-color-primary-dark:    #001F60;   /* darker state for hover */
	--ac-color-primary-light:   #1A4FA5;   /* lighter tint */
	--ac-color-blue:            #0081C9;   /* medium blue — feature sections, hover, footer */
	--ac-color-blue-dark:       #006BA8;   /* hover state for blue */
	--ac-color-secondary:       #A50064;
	--ac-color-secondary-dark:  #800050;
	--ac-color-yellow:          #FFCD00;   /* accent yellow — CTA buttons */
	--ac-color-yellow-dark:     #E0B400;   /* hover state */
	--ac-color-white:           #ffffff;
	--ac-color-black:           #000000;
	--ac-color-text:            #1a1a2e;   /* body copy */
	--ac-color-text-muted:      #4a5568;
	--ac-color-surface:         #f7f8fc;   /* light section backgrounds */
	--ac-color-border:          #dde1f0;
	--ac-color-focus-ring:      #002F86;
	/* Semantic link token — overridden in dark mode so links stay legible */
	--ac-color-link:            var(--ac-color-primary);

	/* ------------------------------------------------------------------
	   Typography
	   ------------------------------------------------------------------ */
	/* Body / headings / general content */
	--ac-font-family:    'Montserrat', system-ui, -apple-system, sans-serif;
	/* Header nav, buttons, labels, UI chrome */
	--ac-font-family-ui: 'Nunito Sans', system-ui, -apple-system, sans-serif;
	--ac-font-size-xs:   0.75rem;    /* 12px */
	--ac-font-size-sm:   0.875rem;   /* 14px */
	--ac-font-size-base: 1rem;       /* 16px */
	--ac-font-size-md:   1.125rem;   /* 18px */
	--ac-font-size-lg:   1.25rem;    /* 20px */
	--ac-font-size-xl:   1.5rem;     /* 24px */
	--ac-font-size-2xl:  2rem;       /* 32px */
	--ac-font-size-3xl:  2.5rem;     /* 40px */
	--ac-font-size-4xl:  3rem;       /* 48px */

	--ac-line-height-tight:  1.2;
	--ac-line-height-normal: 1.6;
	--ac-line-height-loose:  1.8;

	--ac-font-weight-normal:    400;
	--ac-font-weight-medium:    500;
	--ac-font-weight-semibold:  600;
	--ac-font-weight-bold:      700;

	/* ------------------------------------------------------------------
	   Spacing
	   ------------------------------------------------------------------ */
	--ac-space-1:  0.25rem;
	--ac-space-2:  0.5rem;
	--ac-space-3:  0.75rem;
	--ac-space-4:  1rem;
	--ac-space-5:  1.25rem;
	--ac-space-6:  1.5rem;
	--ac-space-8:  2rem;
	--ac-space-10: 2.5rem;
	--ac-space-12: 3rem;
	--ac-space-16: 4rem;
	--ac-space-20: 5rem;
	--ac-space-24: 6rem;

	/* ------------------------------------------------------------------
	   Layout
	   ------------------------------------------------------------------ */
	--ac-container-max:       1280px;
	--ac-container-padding:   1.5rem;
	--ac-section-gap:         2.5rem;
	--ac-overlap-audience:    190px;

	/* ------------------------------------------------------------------
	   Border radius
	   ------------------------------------------------------------------ */
	--ac-radius-sm:   0.375rem;
	--ac-radius-md:   0.625rem;
	--ac-radius-lg:   1rem;
	--ac-radius-xl:   1.25rem;
	--ac-radius-card: 1.125rem;    /* featured program cards */
	--ac-radius-pill: 9999px;

	/* ------------------------------------------------------------------
	   Shadows
	   ------------------------------------------------------------------ */
	--ac-shadow-sm:   0 1px 3px rgba(0, 47, 134, 0.08), 0 1px 2px rgba(0, 47, 134, 0.05);
	--ac-shadow-md:   0 4px 16px rgba(0, 47, 134, 0.10), 0 2px 4px rgba(0, 47, 134, 0.06);
	--ac-shadow-lg:   0 10px 40px rgba(0, 47, 134, 0.14), 0 4px 8px rgba(0, 47, 134, 0.08);
	--ac-shadow-card: 0 8px 32px rgba(0, 47, 134, 0.12);

	/* ------------------------------------------------------------------
	   Z-index scale
	   ------------------------------------------------------------------ */
	--z-base:     1;
	--z-above:    10;
	--z-dropdown: 100;
	--z-overlay:  200;
	--z-modal:    300;
	--z-toast:    400;

	/* ------------------------------------------------------------------
	   Motion
	   ------------------------------------------------------------------ */
	--ac-duration-instant: 0ms;
	--ac-duration-short:   150ms;
	--ac-duration-base:    250ms;
	--ac-duration-medium:  300ms;
	--ac-duration-long:    500ms;
	--ac-ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
	--ac-ease-decelerate:  cubic-bezier(0, 0, 0.2, 1);
	--ac-ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);

	/* ------------------------------------------------------------------
	   Header
	   ------------------------------------------------------------------ */
	--ac-header-height:        150px;
	--ac-header-height-scrolled: 72px;
	--ac-header-height-mobile: 90px;
}

/* Reduced motion: shorten all transitions to instant */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ac-duration-short:  0ms;
		--ac-duration-base:   0ms;
		--ac-duration-medium: 0ms;
		--ac-duration-long:   0ms;
	}
}

/* ==========================================================================
   Dark Mode tokens
   Applied when:
     • User explicitly chose dark  → html[data-color-scheme="dark"]
     • OS prefers dark + no override → @media (prefers-color-scheme: dark) with
       html:not([data-color-scheme="light"])
   ========================================================================== */

/*
 * Strategy: only override the "white-page" tokens. Navy/magenta branded
 * sections stay as-is — they already look great on dark backgrounds and
 * provide natural contrast anchors within the dark palette.
 */

/*
 * Dark Mode tokens.
 *
 * IMPORTANT: --ac-color-white is intentionally NOT overridden here.
 * It stays #ffffff in all modes because it is used as a TEXT colour
 * (buttons, hero headlines, footer headings, card hover text) on coloured
 * backgrounds. Overriding it dark would make all that text invisible.
 *
 * Instead, every element that uses  background: var(--ac-color-white)
 * as a page/surface background is explicitly overridden in dark-mode.css.
 */
html[data-color-scheme="dark"] {
	/* Surface / section backgrounds */
	--ac-color-surface:         #172035;   /* slightly lighter than page bg */
	--ac-color-border:          #2a3a5e;   /* subtle dividers */

	/* Text */
	--ac-color-text:            #e4eaf6;   /* near-white body copy */
	--ac-color-text-muted:      #8a9bbf;   /* secondary labels */

	/* Semantic link: lighten so it contrasts on dark bg */
	--ac-color-link:            #7ba7ff;

	/* Focus ring: bright enough on dark bg */
	--ac-color-focus-ring:      #6d8ffc;

	/* Shadows: stronger on dark to preserve depth */
	--ac-shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.35);
	--ac-shadow-md:   0 4px 20px rgba(0, 0, 0, 0.45);
	--ac-shadow-lg:   0 10px 44px rgba(0, 0, 0, 0.55);
	--ac-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.50);
}

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) {
		--ac-color-surface:         #172035;
		--ac-color-border:          #2a3a5e;
		--ac-color-text:            #e4eaf6;
		--ac-color-text-muted:      #8a9bbf;
		--ac-color-link:            #7ba7ff;
		--ac-color-focus-ring:      #6d8ffc;
		--ac-shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.35);
		--ac-shadow-md:   0 4px 20px rgba(0, 0, 0, 0.45);
		--ac-shadow-lg:   0 10px 44px rgba(0, 0, 0, 0.55);
		--ac-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.50);
	}
}