/*
 * Design tokens — the single source of truth for color, type, spacing and
 * other visual primitives. Components must reference these variables
 * rather than hard-coding values (see architecture §84/§30).
 *
 * Colors below are PROVISIONAL placeholders until the approved logo asset
 * is supplied — do not treat them as final brand colors.
 *
 * Breakpoints cannot be expressed as CSS custom properties inside
 * @media conditions (a CSS language limitation), so the pixel values used
 * throughout assets/css/responsive.css are documented here instead and
 * must stay consistent with this list:
 *   - small:  480px
 *   - tablet: 768px
 *   - desktop: 1024px
 *   - wide:   1280px
 */
:root {
	/* Color */
	--mc-primary: #0B3D66;
	--mc-primary-dark: #06121F;
	--mc-accent: #0B5ED7;
	--mc-background: #FFFFFF;
	--mc-surface: #F5F7FA;
	--mc-text: #12181F;
	--mc-text-muted: #5B6673;
	--mc-border: #DDE3EA;
	--mc-success: #146C41;
	--mc-warning: #B98900;
	--mc-danger: #C0392B;
	--mc-on-primary: #FFFFFF;

	/*
	 * Admin-configurable via Appearance > Customize > M-Cubes Colors
	 * (inc/customizer/colors.php). The values below are the static
	 * fallback defaults — identical to the current brand look — used
	 * only if the Customizer's generated inline style (which always
	 * emits all of these, from the same defaults, once the Customizer
	 * code runs) is somehow absent. See inc/customizer/colors.php for
	 * the single source of truth default values.
	 */
	--mc-heading: #12181F;
	--mc-button: #0B3D66;
	--mc-button-hover: #06121F;
	--mc-success-bg: rgba(30, 142, 90, 0.1);
	--mc-danger-bg: rgba(192, 57, 43, 0.08);

	/* Typography */
	--mc-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mc-font-size-display: clamp(2.5rem, 1.8rem + 3vw, 4rem);
	--mc-font-size-h1: clamp(2rem, 1.6rem + 1.8vw, 3rem);
	--mc-font-size-h2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--mc-font-size-h3: 1.375rem;
	--mc-font-size-h4: 1.125rem;
	--mc-font-size-body: 1rem;
	--mc-font-size-small: 0.875rem;
	--mc-font-size-caption: 0.75rem;
	--mc-line-height-heading: 1.2;
	--mc-line-height-body: 1.6;
	--mc-font-weight-normal: 400;
	--mc-font-weight-medium: 500;
	--mc-font-weight-bold: 700;

	/* Spacing scale */
	--mc-space-1: 0.25rem;
	--mc-space-2: 0.5rem;
	--mc-space-3: 0.75rem;
	--mc-space-4: 1rem;
	--mc-space-5: 1.5rem;
	--mc-space-6: 2rem;
	--mc-space-7: 3rem;
	--mc-space-8: 4rem;

	/* Shape */
	--mc-radius-sm: 4px;
	--mc-radius-md: 8px;
	--mc-radius-lg: 16px;

	/* Elevation */
	--mc-shadow-sm: 0 1px 2px rgba(6, 18, 31, 0.08);
	--mc-shadow-md: 0 4px 16px rgba(6, 18, 31, 0.12);

	/* Layout */
	--mc-container-max: 1200px;
	--mc-container-padding: var(--mc-space-4);

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