/**
 * Monaco Design Tokens
 * =====================
 * Shared CSS custom properties for pragma.mc Phase 1 (3 directions + onboarding)
 *
 * Palette source: Global Constraints, 2026-07-01-pragma-mc-phase1-plan.md
 * Mobile-first, fluid typography via clamp(), themable font hooks
 * No Fraunces. No em-dashes in copy.
 */

:root {
	/* ============================================
     COLORS: Monaco Palette (exact hex values)
     ============================================ */

	/* Primary brand red (Monaco flag) */
	--mc-red: #ce1126;

	/* ROUND3.md §4.1: #ce1126 on #0f0d10 measures 3.4:1 — fails WCAG AA for small text
	   (fine for non-text: bullet dots, chip border, particle accent, seal). Red TEXT on
	   the dark stage uses this instead (>=4.5:1 on #0f0d10, measured 4.9:1). */
	--mc-red-text: #eb4256;

	/* ROUND4.md R4.1: small red text on the light/ivoire ground (#f6f3ec). Consumed via
	   style.css's :root[data-theme="light"] block, which reassigns --mc-red-text to
	   this value (single source, no per-rule duplication). */
	--mc-red-text-light: #a90e20;

	/* Paper / background white */
	--mc-paper: #f6f6f9;

	/* Ink / Petrol scale (dark → light) */
	--mc-ink-deep: #0d3946;
	--mc-ink-mid: #1b6b7c;
	--mc-ink-rim: #54c7d0;

	/* Background ramps */
	/* Light ramp (neutral light backgrounds) */
	--mc-bg-light-strong: #e8ebee;
	--mc-bg-light-weak: #c4c9cf;

	/* Dark ramp (neutral dark backgrounds) */
	--mc-bg-dark-strong: #0f0d10;
	--mc-bg-dark-weak: #040305;

	/* Red core (dark red for accent backgrounds) */
	--mc-bg-red-core: #29050a;

	/* ============================================
     TYPOGRAPHY: Fluid Scale (clamp-based)
     ============================================ */

	/* Hero / large display (mobile 48px → desktop 80px) */
	--mc-fs-hero: clamp(3rem, 8vw, 5rem);

	/* H1 / large heading (mobile 32px → desktop 56px) */
	--mc-fs-h1: clamp(2rem, 5.5vw, 3.5rem);

	/* H2 / medium heading (mobile 24px → desktop 40px) */
	--mc-fs-h2: clamp(1.5rem, 4vw, 2.5rem);

	/* H3 / small heading (mobile 20px → desktop 28px) */
	--mc-fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);

	/* Body text (mobile 16px → desktop 18px) */
	--mc-fs-body: clamp(1rem, 1.5vw, 1.125rem);

	/* Small / caption text (mobile 14px → desktop 16px) */
	--mc-fs-small: clamp(0.875rem, 1.25vw, 1rem);

	/* Smallest / overline text (mobile 12px → desktop 14px) */
	--mc-fs-xs: clamp(0.75rem, 1vw, 0.875rem);

	/* ============================================
     TYPOGRAPHY: Font Families (themable hooks)
     ============================================ */

	/* Display font (serif or distinctive; directions choose their own) */
	--mc-font-display: system-ui, sans-serif;

	/* Body font (neutral sans-serif; directions choose their own) */
	--mc-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

	/* ============================================
     SPACING SCALE (8px base, powers of 2)
     ============================================ */

	--mc-space-xs: 0.25rem; /* 4px */
	--mc-space-sm: 0.5rem; /* 8px */
	--mc-space-md: 1rem; /* 16px */
	--mc-space-lg: 1.5rem; /* 24px */
	--mc-space-xl: 2rem; /* 32px */
	--mc-space-2xl: 3rem; /* 48px */
	--mc-space-3xl: 4rem; /* 64px */

	/* Touch target minimum (44px per WCAG) */
	--mc-touch-min: 2.75rem;

	/* ============================================
     BORDER RADIUS
     ============================================ */

	/* Sharp / minimal (minimal designs prefer less rounding) */
	--mc-radius-none: 0;
	--mc-radius-xs: 0.25rem;

	/* Soft / subtle (standard rounded corners) */
	--mc-radius-sm: 0.5rem;
	--mc-radius-md: 1rem;

	/* Large / pill-shaped (buttons, chips) */
	--mc-radius-lg: 1.5rem;
	--mc-radius-xl: 2rem;

	/* Full circle (avatars, circular elements) */
	--mc-radius-full: 9999px;

	/* ============================================
     TRANSITIONS & MOTION (mobile-first, 60fps)
     ============================================ */

	/* Fast (UI feedback, micro-interactions) */
	--mc-duration-fast: 150ms;
	--mc-easing-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* Standard (component transitions) */
	--mc-duration-base: 300ms;
	--mc-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);

	/* Slow (enter/exit animations, hero sequences) */
	--mc-duration-slow: 600ms;
	--mc-easing-elegant: cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* ============================================
     SHADOWS & DEPTH (subtle, minimal) */
	/* ============================================ */

	/* Flat (no shadow, default) */
	--mc-shadow-none: none;

	/* Subtle (card hover, small lift) */
	--mc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);

	/* Medium (card, modal backdrop) */
	--mc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);

	/* Large (floating panels, overlays) */
	--mc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.2);

	/* ============================================
     OPACITIES (reduced-motion accessibility)
     ============================================ */

	--mc-opacity-disabled: 0.5;
	--mc-opacity-hover: 0.8;
	--mc-opacity-focus: 0.95;
	--mc-opacity-full: 1;
}

/**
 * Reduced-motion preferences (respect prefers-reduced-motion: reduce)
 * Animations should use shorter durations or be disabled entirely for users
 * who have set this OS-level preference.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--mc-duration-fast: 0ms;
		--mc-duration-base: 0ms;
		--mc-duration-slow: 0ms;
	}
}