/**
 * DigiWebFX Design Tokens
 * Strictly aligned with PLAN.md Sections 2, 3, 4
 */

/* 0. Self-Hosted Fonts & Size-Adjusted Fallbacks (CLS Prevention) */
@font-face {
	font-family: 'Satoshi-Fallback';
	src: local('Segoe UI'), local('Arial');
	ascent-override: 95%;
	descent-override: 25%;
	line-gap-override: 0%;
	size-adjust: 102%;
}

@font-face {
	font-family: 'Satoshi';
	src: url('../fonts/satoshi-variable.woff2') format('woff2-variations'),
	     url('../fonts/satoshi-variable.woff2') format('woff2');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Jost';
	src: url('../fonts/jost-variable.woff2') format('woff2-variations'),
	     url('../fonts/jost-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/jetbrains-mono-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'JetBrains Mono';
	src: url('../fonts/jetbrains-mono-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* 1. Color Palette */
	--navy-950: #050D1A;
	--navy-900: #0A1A33;
	--navy-800: #10264A;
	--navy-700: #1B3A6B;
	--gold-400: #E3C566;
	--gold-500: #D4AF37;
	--gold-700: #8A6D12;
	--ivory-50: #FFFFFF;
	--white: #FFFFFF;
	--slate-300: #B6C0D1;
	--slate-400: #8FA0BA;
	--slate-600: #4A5568;
	--success: #1F8A5B;
	--danger: #C0392B;
	--gold-gradient: linear-gradient(135deg, #B8922B 0%, #E3C566 45%, #D4AF37 60%, #9C7A1E 100%);
	--gold-metallic: linear-gradient(135deg, #B8922B 0%, #F5D77F 25%, #D4AF37 50%, #FAF0CD 75%, #9C7A1E 100%);
	--gold-glow: 0 10px 30px -4px rgba(212, 175, 55, 0.45);
	--gold-border-glow: 1px solid rgba(212, 175, 55, 0.35);

	/* 2. Typography */
	--font-primary: Satoshi, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	--font-accent: Jost, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	--font-mono: "JetBrains Mono", Consolas, monospace;

	/* Fluid Font Scale (360px - 1440px viewport) */
	--fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
	--fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	--fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--fs-md: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
	--fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
	--fs-xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
	--fs-2xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
	--fs-3xl: clamp(2.75rem, 2rem + 3.8vw, 5rem);

	/* 3. Spacing Scale (4px base) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;
	--space-32: 128px;
	--section-padding: clamp(64px, 9vw, 128px);

	/* 4. Layout Dimensions */
	--container-max: 1280px;
	--container-pad: clamp(16px, 4vw, 48px);
	--reading-col: 720px;
	--header-height: 64px;

	/* 5. Radii */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-full: 9999px;

	/* 6. Elevation & Micro-Borders */
	--border-dark: 1px solid rgba(255, 255, 255, 0.08);
	--border-light: 1px solid rgba(15, 27, 61, 0.08);
	--shadow-subtle: 0 10px 30px -10px rgba(10, 26, 51, 0.08);

	/* 7. Motion & Transitions */
	--transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
	--transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);

	/* 8. WCAG 2.2 Accessible Focus Rings */
	--focus-dark: 3px solid var(--gold-400);
	--focus-light: 3px solid var(--navy-700);
	--focus-offset: 2px;
}