/*
 * Programmer Virtual - design tokens.
 * Single source of truth for colour, type, radius, elevation and motion.
 * NO hex / rgb() / hsl() literal may appear outside this file.
 *
 * Direction: "Editorial Studio" - solid surfaces separated by 1px borders,
 * typography carries the design, the brand gradient is an accent only.
 */

/* ---------------------------------------------------------------------------
 * 1. Typeface - Plus Jakarta Sans (self-hosted, latin subset, v12 files)
 * ------------------------------------------------------------------------ */

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('../fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('../fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('../fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('../fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('../fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
 * 2. Light mode (default)
 * ------------------------------------------------------------------------ */

:root {
	color-scheme: light;

	/* Brand ---------------------------------------------------------------- */
	--brand-primary: #2072DF;
	--brand-secondary: #0CBDB9;
	--brand-mid: #1599CB;
	--on-brand: #FFFFFF;

	/* Decorative gradient. Accent only: logomark tint, hairline rules,
	   non-semantic fills. Never used behind text or icons. */
	--brand-gradient: linear-gradient(45deg, var(--brand-primary), var(--brand-mid) 55%, var(--brand-secondary));

	/* Gradient used as a BACKGROUND under --on-brand text or icons.
	   Every stop keeps >= 4.5:1 against #FFFFFF, which the raw brand
	   gradient does not (the teal end lands at 2.4:1). */
	--brand-gradient-cta: linear-gradient(120deg, #1A5CB8 0%, #2072DF 48%, #0B7F97 100%);

	/* Gradient used as TEXT fill (.pv-highlight, display numerals).
	   Stops stay >= 3:1 against --surface, so it is valid for large
	   display type only - never for body copy. */
	--brand-gradient-text: linear-gradient(100deg, #1A5CB8 0%, #2072DF 45%, #0E8C93 100%);

	/* Surfaces ------------------------------------------------------------- */
	--ink: #0B1220;
	--surface: #FFFFFF;
	--surface-raised: #F6F8FB;
	--border: #E3E8EF;
	--border-strong: #C9D3E1;

	/* Resting border for text inputs, selects and textareas. Held at >= 3:1
	   against both --surface and --surface-raised so the field boundary meets
	   WCAG 1.4.11 non-text contrast. --border and --border-strong stay light
	   on purpose - they are decorative separators, not component boundaries. */
	--border-input: #7D8AA2;

	/* Text ----------------------------------------------------------------- */
	--text-primary: #0B1220;
	--text-secondary: #47546A;
	--text-muted: #64728B;
	--text-inverse: #FFFFFF;
	--text-link: #1A5CB8;

	/* Status --------------------------------------------------------------- */
	--status-success: #167A4C;
	--status-success-surface: #E9F7F0;
	--status-error: #B3261E;
	--status-error-surface: #FCEEED;
	--status-warning: #8A5A00;
	--status-warning-surface: #FFF4DE;

	/* Elevation ------------------------------------------------------------ */
	--shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
	--shadow-md: 0 1px 2px rgba(11, 18, 32, 0.04), 0 10px 30px rgba(11, 18, 32, 0.10);
	--shadow-lg: 0 2px 4px rgba(11, 18, 32, 0.06), 0 18px 50px rgba(11, 18, 32, 0.14);

	/* Type, geometry, motion (mode-invariant) ------------------------------ */
	--font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--radius: 10px;
	--radius-lg: 16px;
	--radius-pill: 999px;
	--container: 1160px;
	--header-height: 68px;
	--transition: 180ms cubic-bezier(0.2, 0, 0, 1);
	--transition-slow: 320ms cubic-bezier(0.2, 0, 0, 1);
}

/* ---------------------------------------------------------------------------
 * 3. Dark mode - every colour token above is restated here.
 *    Brand hues are intentionally identical in both modes (brand fidelity);
 *    they are repeated rather than inherited so this block is the complete
 *    dark palette and can be audited on its own.
 * ------------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		/* Brand ------------------------------------------------------------ */
		--brand-primary: #2072DF;
		--brand-secondary: #0CBDB9;
		--brand-mid: #1599CB;
		--on-brand: #FFFFFF;

		--brand-gradient: linear-gradient(45deg, var(--brand-primary), var(--brand-mid) 55%, var(--brand-secondary));

		/* Sits under white text on a filled button in either mode, so the
		   contrast-safe CTA gradient does not change. */
		--brand-gradient-cta: linear-gradient(120deg, #1A5CB8 0%, #2072DF 48%, #0B7F97 100%);

		/* Text fill must lighten on a dark surface to stay legible. */
		--brand-gradient-text: linear-gradient(100deg, #6FA8F0 0%, #4FC3E8 55%, #38D6D0 100%);

		/* Surfaces --------------------------------------------------------- */
		--ink: #E7ECF5;
		--surface: #0B1220;
		--surface-raised: #121B2E;
		--border: #263248;
		--border-strong: #33415A;
		--border-input: #5B6B85;

		/* Text ------------------------------------------------------------- */
		--text-primary: #E7ECF5;
		--text-secondary: #A7B4C9;
		--text-muted: #8B99B0;
		--text-inverse: #0B1220;
		--text-link: #6FA8F0;

		/* Status ----------------------------------------------------------- */
		--status-success: #5AD69A;
		--status-success-surface: #10281C;
		--status-error: #F2938C;
		--status-error-surface: #331512;
		--status-warning: #E8B75B;
		--status-warning-surface: #2E2410;

		/* Elevation -------------------------------------------------------- */
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
		--shadow-md: 0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 30px rgba(0, 0, 0, 0.50);
		--shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 50px rgba(0, 0, 0, 0.60);
	}
}