/* KreavtivStudio design tokens — SRS v2.0 §2. Components reference semantic variables only, never raw hex. */

/* Web fonts are declared inline by inc/assets.php (absolute URLs, preloaded). */
/* Size-adjusted fallbacks so the swap does not shift layout (CLS). */
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("Helvetica");
	size-adjust: 107%;
	ascent-override: 90%;
	descent-override: 22%;
}
@font-face {
	font-family: "Instrument Serif Fallback";
	src: local("Times New Roman"), local("Times");
	size-adjust: 92%;
	ascent-override: 95%;
	descent-override: 25%;
}

:root {
	/* 2.2 Color — raw palette */
	--ks-orange: #FF4500;
	--ks-orange-hover: #E03D00;
	--ks-black: #0B0B0B;
	--ks-charcoal: #1C1C1A;
	--ks-cream: #F5F4F0;
	--ks-white: #FFFFFF;

	/* Semantic (light default) */
	--color-orange: var(--ks-orange);
	--color-black: var(--ks-black);
	--color-charcoal: var(--ks-charcoal);
	--color-cream: var(--ks-cream);
	--color-white: var(--ks-white);
	--color-border: #D9D6CE;
	--color-muted: #6B6B66;
	--color-surface: var(--ks-cream);
	--color-surface-raised: var(--ks-white);
	--color-on-surface: var(--ks-black);
	--color-focus: var(--ks-black);
	/* Orange is only legible as small text on black/charcoal; on light it is a fill/rule colour. */
	--color-accent-text: var(--ks-black);

	/* 2.3 Typography */
	--font-display: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
	--font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-display-xl: clamp(72px, 11vw, 168px);
	--fs-display-l: clamp(56px, 7.5vw, 116px);
	--fs-display-m: clamp(40px, 5vw, 76px);
	--fs-h1: clamp(36px, 4vw, 58px);
	--fs-h2: clamp(28px, 3vw, 42px);
	--fs-h3: clamp(22px, 2vw, 28px);
	--fs-h4: clamp(18px, 1.5vw, 20px);
	--fs-body-l: clamp(18px, 1.4vw, 21px);
	--fs-body: 16px;
	--fs-body-s: 14px;
	--fs-caption: 12px;
	--fs-eyebrow: 12px;
	--fs-technical: 11px;
	--fs-nav: 13px;
	--fs-button: 14px;

	/* 2.4 Spatial */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
	--space-11: 160px;

	--container-max: 1440px;
	--gutter: clamp(32px, 4vw, 64px);
	--col-gap: 24px;
	--grid-cols: 12;
	--section-space: 160px;
	--card-gap: 24px;

	/* 2.5 Borders, shadows, motion, z-index */
	--radius-0: 0;
	--radius-input: 2px;
	--radius-pill: 999px;
	--hairline: 1px solid var(--color-border);
	--rule-strong: 1px solid var(--color-on-surface);
	--rule-accent: 2px solid var(--color-orange);
	--shadow-float: 0 12px 32px rgba(11, 11, 11, .18);

	--dur-micro: 150ms;
	--dur-standard: 350ms;
	--dur-large: 700ms;
	--dur-cinematic: 900ms;
	--ease-standard: cubic-bezier(.2, 0, 0, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);

	--z-canvas: 0;
	--z-scene-video: 1;
	--z-annotations: 20;
	--z-narrative: 30;
	--z-stage-rail: 40;
	--z-nav: 100;
	--z-overlay: 900;
	--z-modal: 910;
	--z-toast: 1000;
	--z-cursor: 1100;

	--nav-height: 64px;
}

@media (max-width: 1199px) {
	:root {
		--gutter: 32px;
		--col-gap: 20px;
		--grid-cols: 8;
		--section-space: 112px;
		--card-gap: 20px;
	}
}
@media (max-width: 767px) {
	:root {
		--gutter: 20px;
		--col-gap: 16px;
		--grid-cols: 4;
		--section-space: 72px;
		--card-gap: 16px;
	}
}

/* Section theming: a section sets data-theme and every component re-maps automatically. */
[data-theme="dark"] {
	--color-border: #2E2E2B;
	--color-muted: #A5A39B;
	--color-surface: var(--ks-black);
	--color-surface-raised: var(--ks-charcoal);
	--color-on-surface: var(--ks-white);
	--color-focus: var(--ks-white);
	--color-accent-text: var(--ks-orange);
}
[data-theme="charcoal"] {
	--color-border: #2E2E2B;
	--color-muted: #A5A39B;
	--color-surface: var(--ks-charcoal);
	--color-surface-raised: var(--ks-black);
	--color-on-surface: var(--ks-white);
	--color-focus: var(--ks-white);
	--color-accent-text: var(--ks-orange);
}
[data-theme="light"] {
	--color-border: #D9D6CE;
	--color-muted: #6B6B66;
	--color-surface: var(--ks-cream);
	--color-surface-raised: var(--ks-white);
	--color-on-surface: var(--ks-black);
	--color-focus: var(--ks-black);
	--color-accent-text: var(--ks-black);
}
[data-theme="white"] {
	--color-surface: var(--ks-white);
	--color-surface-raised: var(--ks-cream);
}