/**
 * Design Tokens — the single source of truth for the visual system.
 *
 * These are the values the Figma token importer overrides
 * (Appearance → Figma Tokens). Change defaults here per-project,
 * or import from Figma and let the overrides win.
 */

:root {
	/* ---- Colors (More To Be Made brand) ---- */
	--color-primary: #0041b5;        /* MTM Blue */
	--color-primary-dark: #00318a;   /* MTM Blue hover */
	--color-primary-light: #1a5ad1;  /* MTM Blue lighter */
	--color-secondary: #fff800;      /* MTM Yellow */
	--color-accent: #1ef4da;         /* MTM Cyan */
	--color-green: #0cea41;          /* MTM Green */
	--color-yellow: #fff800;
	--color-cyan: #1ef4da;
	--color-blue: #0041b5;
	--color-background: #ffffff;
	--color-surface: #f4f6fb;
	--color-surface-dark: #001a4d;   /* Deep navy for photo overlays */
	--color-border: #c9d3ea;
	--color-text: #001a4d;
	--color-text-muted: #4a5b80;
	--color-text-inverse: #ffffff;
	--color-success: #0cea41;
	--color-error: #c62828;

	--gradient-cn: linear-gradient(135deg, #0041b5 0%, #1ef4da 100%);
	--gradient-duotone: linear-gradient(180deg, rgba(30, 244, 218, 0.15) 0%, rgba(0, 65, 181, 0.5) 100%);

	/* ---- Typography (Config Variable via Adobe Fonts) ---- */
	--font-primary: 'config-variable', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
	--font-secondary: var(--font-primary);
	--font-width-condensed: 50;
	--font-width-normal: 100;
	--font-slant-italic: -12;
	--font-size-xs: 0.875rem;    /* 14px */
	--font-size-sm: 1rem;        /* 16px */
	--font-size-base: 1.125rem;  /* 18px */
	--font-size-lg: 1.375rem;    /* 22px */
	--font-size-xl: 1.875rem;    /* 30px */
	--font-size-2xl: 2.5rem;     /* 40px */
	--font-size-3xl: 3.5rem;     /* 56px */
	--font-size-4xl: 5rem;       /* 80px */
	--font-size-hero: clamp(3rem, 12vw, 8.5rem);
	--font-weight-light: 300;
	--font-weight-book: 400;
	--font-weight-normal: 400;
	--font-weight-medium: 500;    /* Subhead: Condensed Medium */
	--font-weight-bold: 700;
	--font-weight-xbold: 800;     /* Headline: Condensed Extra Bold Italic */
	--font-weight-black: 900;     /* Emphasis: Condensed Black */
	--line-height-tight: 0.95;
	--line-height-base: 1.5;
	--line-height-heading: 1.05;
	--letter-spacing-caps: 0.01em;

	/* ---- Spacing ---- */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 2rem;
	--space-xl: 4rem;
	--space-2xl: 8rem;

	/* ---- Layout ---- */
	--container-max: 1200px;
	--container-wide: 1400px;
	--container-narrow: 800px;
	--gutter: var(--space-md);

	/* ---- Effects ---- */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
	--transition-fast: 150ms ease;
	--transition-base: 300ms ease;
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/*
 * Breakpoint reference (CSS variables can't be used in media queries):
 *   sm: 640px | md: 768px | lg: 1024px | xl: 1280px
 * Always write mobile-first: base styles, then min-width overrides.
 */