/**
 * MX Design Tokens — unified source for colors, typography, spacing, and shadows.
 * Semantic layer designed to support light/dark theme switching via [data-theme] selector.
 * Breakpoints: 640px (mobile), 1024px (tablet).
 */

:root {
  /* ===== Typography Scale (6 semantic roles) ===== */
  --mx-font-size-display: clamp(2rem, 7vw, 3.5rem); /* Main hero titles, max prominence */
  --mx-font-size-h1: clamp(1.75rem, 5vw, 2.75rem); /* Section headings, primary importance */
  --mx-font-size-h2: 1.25rem; /* Subsection headings */
  --mx-font-size-body: 0.9375rem; /* Main content, 15px */
  --mx-font-size-small: 0.8rem; /* Tags, captions, secondary metadata */
  --mx-font-size-micro: 0.75rem; /* Inline labels, minimal text */

  /* ===== Spacing Scale (6 increments, base 4px) ===== */
  --mx-space-1: 0.25rem; /* 4px */
  --mx-space-2: 0.5rem; /* 8px */
  --mx-space-3: 0.75rem; /* 12px */
  --mx-space-4: 1rem; /* 16px */
  --mx-space-5: 1.5rem; /* 24px */
  --mx-space-6: 2rem; /* 32px */

  /* ===== Border Radius ===== */
  --mx-radius-xs: 4px;
  --mx-radius-sm: 6px;
  --mx-radius-md: 10px;
  --mx-radius-lg: 16px;
  --mx-radius-full: 999px;

  /* ===== Shadows ===== */
  --mx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --mx-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
  --mx-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.05);
  --mx-shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* ===== Semantic Colors (Light theme) ===== */
  /* Primary ink — main text, default foreground */
  --mx-ink: #000000;

  /* Secondary ink — auxiliary text, lower emphasis */
  /* WCAG AA compliant: #5b6472 = 5.98:1 contrast ratio (replaces #9ca3af = 2.54:1 and #8b93a1 = 3.09:1) */
  --mx-muted: #5b6472;

  /* Borders and dividers */
  --mx-line: #e5e7eb;

  /* Primary accent — main interactive color, secondary CTA */
  --mx-accent: #0088cc;

  /* Strong accent — primary CTA, destructive actions */
  --mx-accent-strong: #e21c23;

  /* Highlights — markers, badges */
  --mx-highlight: #ffe14d;

  /* Card/panel background */
  --mx-surface: #ffffff;

  /* Page background */
  --mx-bg: #f5f5f5;

  /* ===== Font Family ===== */
  --mx-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ===== Legacy Variable Mapping (compatibility during migration) ===== */
  /* These map old --c-* variables to new --mx-* tokens */
  --c-brutal: #000000;
  --c-marker: #ffe14d;
  --c-accent: #e21c23;
  --c-secondary: #0088cc;
  --c-bg: #f5f5f5;
  --c-card-bg: #ffffff;
  --bg: var(--c-bg);
  --card-bg: var(--c-card-bg);
  --text: var(--c-brutal);
  --text-secondary: #4b5563;
  --accent: var(--c-secondary);
  --accent-hover: #229ed9;
  --green: #16a34a;
  --green-hover: #15803d;
  --border: var(--c-brutal);
  --border-light: #e5e7eb;
  --separator: #e5e7eb;
  --surface: #ffffff;
  --font: var(--mx-font-family);
  --primary: #0088cc;
  --c-primary: #0088cc;
  --radius: 10px;
  --accent-light: #e0f2fe;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.08);
}