/*
 * Stone Cliff Digital — Global Design Tokens
 * Source: Claude Design "Stone Cliff Digital - Design System" reference page.
 * Foundation only — no component or page styles here.
 */

:root {
	/* Base surfaces */
	--sc-ink: #101215;
	--sc-ink-2: #191D20;
	--sc-ink-3: #22272B;
	--sc-ink-4: #2E353B;
	--sc-footer-base: #0D0F11;
	--sc-paper: #FBFAF8;
	--sc-paper-2: #F2EFEA;
	--sc-icy: #F7F9FC;

	/* Slate / neutral scale */
	--sc-slate-700: #454B52;
	--sc-slate-500: #6B7178;
	--sc-slate-300: #AEB3B8;
	--sc-slate-200: #DCDEDF;
	--sc-slate-100: #EAEBEA;

	/* Functional blues */
	--sc-blue: #2A4CFF;
	--sc-blue-light: #6C86FF;
	--sc-blue-dark: #1D38C7;
	--sc-blue-border-emphasis: rgba(108, 134, 255, 0.4);

	/* Text */
	--sc-text-onlight: #181B1E;
	--sc-text-onlight-mute: #666B70;
	--sc-text-ondark: #F6F7F8;
	--sc-text-ondark-mute: #9DA3A9;

	/* Typography */
	--sc-font-heading: 'Manrope', sans-serif;
	--sc-font-body: 'Inter', sans-serif;
	--sc-font-mono: 'JetBrains Mono', monospace;

	/* Radii */
	--sc-radius-sm: 2px;
	--sc-radius-md: 8px;
	--sc-radius-lg: 10px;
	--sc-radius-xl: 14px;
	--sc-radius-2xl: 20px;

	/* Type sizes (desktop — matches theme.json fontSizes) */
	--sc-text-mono-label: 12px;
	--sc-text-body: 16px;
	--sc-text-h3: 19px;
	--sc-text-h2: 38px;
	--sc-text-h1-service: 44px;
	--sc-text-h1-home: 52px;

	/* Spacing scale (matches theme.json spacingSizes) */
	--sc-space-50: 8px;
	--sc-space-100: 16px;
	--sc-space-200: 24px;
	--sc-space-300: 40px;
	--sc-space-400: 56px;
	--sc-space-500: 96px;
	--sc-space-600: 164px;

	/* Text measure widths (as used across the approved design) */
	--sc-measure-narrow: 560px;
	--sc-measure: 640px;
	--sc-measure-wide: 680px;

	/* Layout */
	--sc-canvas-width: 1440px;
	--sc-content-width: 1300px;
	--sc-header-height: 112px;
	--sc-gutter: var(--sc-space-200);
	--sc-section-padding-min: 96px;
	--sc-section-padding-max: 164px;

	/* Motion */
	--sc-transition-fast: 150ms ease;
	--sc-transition-base: 250ms ease;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--sc-transition-fast: 0ms;
		--sc-transition-base: 0ms;
	}
}

/*
 * Responsive foundation — global token overrides only. Desktop values
 * above are untouched; these media queries just redefine the same
 * variables at narrower viewports so every page that already consumes
 * them (headings, header height, container gutter) adjusts automatically
 * without page-specific responsive work.
 */

/* Fluid heading scale — desktop size at >=1440px, scales down smoothly
   toward the mobile floor instead of jumping at a breakpoint. */
:root {
	--sc-text-h1-home: clamp(34px, 1.69vw + 27.66px, 52px);
	--sc-text-h1-service: clamp(30px, 1.32vw + 25.07px, 44px);
	--sc-text-h2: clamp(28px, 0.94vw + 24.48px, 38px);
}

@media (max-width: 1024px) {
	:root {
		--sc-header-height: 84px;
		--sc-section-padding-min: 64px;
		--sc-section-padding-max: 96px;
	}
}

@media (max-width: 480px) {
	:root {
		--sc-header-height: 72px;
		--sc-gutter: var(--sc-space-100);
		--sc-section-padding-min: 48px;
	}
}