/**
 * MFF core design tokens as CSS custom properties.
 * Kept in sync by hand with colors.ts / semantic.ts / typography.ts / spacing.ts / motion.ts —
 * these are the single source of truth; if you change a value, change it here AND there.
 *
 * PRIMITIVE = what colour is it? SEMANTIC = what does it mean? Components
 * should consume the semantic (--mff-color-*, --mff-surface-*, --mff-data-*)
 * layer, not the primitive layer, wherever practical.
 */
:root {
  /* Primitive — L5.1 Mineral neutral scale */
  --mff-neutral-50: #f8f9f7; /* Raised */
  --mff-neutral-100: #eff1ef; /* Canvas */
  --mff-neutral-200: #e4e6e4; /* Inset */
  --mff-neutral-300: #d5d9d5; /* Border */
  --mff-neutral-850: #2a2627; /* Dark raised */
  --mff-neutral-900: #221f20; /* Near-black */

  /* Primitive — signal colours */
  --mff-yellow-500: #ffd400;
  --mff-yellow-600: #e9c200;
  --mff-red-500: #f5120a;
  --mff-green-500: #3fa65a;
  --mff-blue-500: #4c7eff;
  --mff-blue-50: #eaf0f2; /* Method tint */

  /* Primitive — supplementary confirmed values (distinct hue family, narrow live roles) */
  --mff-surface-card-fill: #1c1919; /* LazyImage placeholder / card fill on dark surfaces */
  --mff-ink-eyebrow: rgb(74, 90, 95);
  --mff-data-label: rgb(159, 180, 186);
  --mff-confirm-neutral: rgb(102, 124, 130); /* standard checklist confirmation — distinct from a comparative win */

  /* Primitive — value-preserving aliases for names still consumed directly by component CSS */
  --mff-surface-charcoal: var(--mff-neutral-900);
  --mff-surface-testimonial: var(--mff-neutral-850);
  --mff-ink-primary: var(--mff-neutral-900); /* rgb(34,31,32) === #221F20 exactly — was a duplicate literal, now a real alias */
  --mff-action-yellow: var(--mff-yellow-500);
  --mff-semantic-warning: var(--mff-red-500);
  --mff-semantic-confirm-win: var(--mff-green-500);
  --mff-semantic-confirm-neutral: var(--mff-confirm-neutral);

  /* Semantic — surfaces */
  --mff-surface-canvas: var(--mff-neutral-100);
  --mff-surface-raised: var(--mff-neutral-50);
  --mff-surface-inset: var(--mff-neutral-200);
  --mff-surface-dark: var(--mff-neutral-900);
  --mff-surface-dark-raised: var(--mff-neutral-850);
  --mff-surface-method: var(--mff-blue-50);

  /* Semantic roles (what components should reference) */
  --mff-color-background: var(--mff-surface-canvas);
  --mff-color-background-inverse: var(--mff-surface-dark);
  --mff-color-surface: var(--mff-surface-raised);
  --mff-color-surface-inverse: var(--mff-surface-card-fill);
  --mff-color-action: var(--mff-yellow-500);
  --mff-color-action-hover: var(--mff-yellow-600);
  --mff-color-border: var(--mff-neutral-300);
  --mff-color-border-inverse: rgba(248, 249, 247, 0.16); /* derived from neutral-50 (#F8F9F7) — was stale rgba(247,241,231,…), the old bone RGB, even after surface.bone itself moved on */
  --mff-color-warning-wash: rgba(245, 18, 10, 0.15);
  --mff-color-text: var(--mff-neutral-900);
  --mff-color-text-inverse: var(--mff-neutral-50);
  --mff-color-text-muted: var(--mff-ink-eyebrow);

  /* Semantic — data (Metric/Benchmark/Target visual rule: ME = near-black, BENCHMARK = blue, TARGET = yellow) */
  --mff-data-method: var(--mff-blue-500);
  --mff-data-positive: var(--mff-green-500);
  --mff-data-negative: var(--mff-red-500);
  --mff-data-target: var(--mff-yellow-500);

  /* Typography */
  --mff-font-sans: 'Switzer', 'Archivo', system-ui, sans-serif; /* Switzer is canonical display voice; Archivo kept as fallback only */
  --mff-font-body: 'Inter', system-ui, sans-serif;
  --mff-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --mff-font-serif: 'Source Serif 4', Georgia, serif; /* selective editorial accent, narrow role — see docs/brand/Typography.mdx */

  --mff-text-h1: 3rem;
  --mff-text-h2: 2rem;
  --mff-text-card-headline: 1.5rem;
  --mff-text-body-large: 1.125rem;
  --mff-text-body: 1rem;
  --mff-text-interface-label: 0.875rem;
  --mff-text-mono-label: 0.8125rem;

  --mff-leading-tight: 1.15;
  --mff-leading-body: 1.6;
  --mff-leading-data: 1.35;

  /* Spacing (4px base) */
  --mff-space-1: 4px;
  --mff-space-2: 8px;
  --mff-space-3: 12px;
  --mff-space-4: 16px;
  --mff-space-5: 20px;
  --mff-space-6: 24px;
  --mff-space-8: 32px;
  --mff-space-10: 40px;
  --mff-space-12: 48px;
  --mff-space-16: 64px;
  --mff-space-20: 80px;
  --mff-space-24: 96px;

  --mff-reading-width: 760px;

  /* Safe area (notch / Dynamic Island / home indicator) — reusable so every fixed header, modal
     header and bottom nav clears the real device inset the same way instead of each guessing
     its own arbitrary margin. Requires viewport-fit=cover in the page's viewport meta tag, or
     env() always resolves to the 0px fallback. Compose with real spacing via calc(), e.g.
     padding-top: calc(var(--mff-safe-top) + 16px) — never substitute the inset for spacing. */
  --mff-safe-top: env(safe-area-inset-top, 0px);
  --mff-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Radii */
  --mff-radius-button: 5px;
  --mff-radius-chip: 6px;
  --mff-radius-card: 11px;
  --mff-radius-circular: 50%;

  /* Motion */
  --mff-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --mff-duration-hover: 200ms;
  --mff-duration-reveal: 250ms;

  /* Focus ring — accessibility floor, applies everywhere */
  --mff-focus-ring: 0 0 0 3px rgba(255, 212, 0, 0.55); /* derived from yellow-500 (#FFD400) — was stale rgba(242,194,48,…), the pre-Phase-6 yellow #F2C230 */
}