/*
 * money map — design tokens (matador foundation)
 * ------------------------------------------------
 * The single source of truth for the visual system. Semantic CSS custom
 * properties ONLY — components reference these, never raw hex/hsl. Per the
 * matador dual-mode rule every token is defined for BOTH light (:root) and
 * premium-dark (.dark); neither is an afterthought.
 *
 * Identity (locked): Space Grotesk display · Instrument Serif marketing ·
 * matador red accent · tinted neutrals (never pure black/white).
 *
 * Colours are authored as space-separated HSL channels so they compose with
 * hsl(var(--token) / <alpha>) for tints and translucency.
 */

:root {
  /* ---- Brand accent (matador red) ---------------------------------- */
  --mm-accent: 357 78% 52%;
  --mm-accent-hover: 357 74% 46%;
  --mm-accent-active: 357 72% 41%;
  --mm-accent-foreground: 0 0% 100%;

  /* ---- Neutrals — warm, tinted off-whites (never #fff) -------------- */
  --mm-bg: 40 33% 98%;
  --mm-surface: 40 24% 96%;
  --mm-surface-raised: 0 0% 100%;
  --mm-border: 40 12% 88%;
  --mm-border-strong: 40 10% 80%;

  /* ---- Ink — tinted near-black (never #000) ------------------------- */
  --mm-text: 240 10% 12%;
  --mm-text-muted: 240 6% 38%;
  --mm-text-subtle: 240 5% 44%; /* AA-safe (>=4.5:1) on --mm-bg at 14px */

  /* ---- Feedback ---------------------------------------------------- */
  --mm-success: 152 42% 38%;
  --mm-warning: 34 88% 34%;   /* L=34% → 4.7:1 on --mm-bg (AA ✓); was 44% @ 3.0:1 */
  --mm-danger: 357 68% 48%;

  /* ---- AA-safe text variants — dedicated foreground tokens for text/labels.
     The shared fill tokens above are calibrated for backgrounds (fills, borders,
     dots). Using them as text on light surfaces: green 3.87:1, amber 4.7:1, red
     4.24:1 vs near-white (amber now meets AA; green + red still do not). These
     darker variants exceed AA more comfortably for small labels. ----------- */
  --mm-success-text: 152 55% 26%;   /* 6.1:1 on near-white */
  --mm-warning-text: 34 75% 28%;    /* 6.7:1 on near-white; badge label on tint: 5.9:1 */
  --mm-accent-text: 357 78% 38%;    /* 6.9:1 on near-white */

  /* ---- Focus ring -------------------------------------------------- */
  --mm-ring: 357 78% 52%;

  /* ---- Elevation — shadows as tints, not flat black ---------------- */
  --mm-shadow-sm: 0 1px 2px hsl(240 12% 20% / 0.06);
  --mm-shadow-md: 0 4px 16px -4px hsl(240 12% 20% / 0.10);
  --mm-shadow-lg: 0 12px 40px -8px hsl(240 14% 18% / 0.16);

  color-scheme: light;
}

.dark {
  /* ---- Brand accent — lifted for contrast on dark ------------------ */
  --mm-accent: 357 82% 62%;
  --mm-accent-hover: 357 84% 68%;
  --mm-accent-active: 357 80% 58%;
  --mm-accent-foreground: 357 40% 8%;

  /* ---- Neutrals — tinted near-black surfaces (never #000) ---------- */
  --mm-bg: 240 8% 6%;
  --mm-surface: 240 7% 9%;
  --mm-surface-raised: 240 7% 12%;
  --mm-border: 240 6% 18%;
  --mm-border-strong: 240 6% 26%;

  /* ---- Ink --------------------------------------------------------- */
  --mm-text: 0 0% 98%;
  --mm-text-muted: 240 5% 68%;
  --mm-text-subtle: 240 5% 70%;   /* bumped from 52% — was 4.24:1 on card surface */

  /* ---- Feedback ---------------------------------------------------- */
  --mm-success: 152 46% 54%;
  --mm-warning: 34 90% 60%;
  --mm-danger: 357 78% 64%;

  /* ---- AA-safe text variants for dark surfaces --------------------- */
  --mm-success-text: 152 46% 54%;   /* same as fill — already 7.4:1 on dark */
  --mm-warning-text: 34 90% 68%;    /* 5.9:1 on dark card surface */
  --mm-accent-text: 357 82% 76%;    /* 7.3:1 on dark card surface (was 4.24:1) */

  --mm-ring: 357 82% 62%;

  --mm-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.40);
  --mm-shadow-md: 0 4px 16px -4px hsl(0 0% 0% / 0.50);
  --mm-shadow-lg: 0 12px 40px -8px hsl(0 0% 0% / 0.60);

  color-scheme: dark;
}

:root {
  /* ---- Typography -------------------------------------------------- */
  --mm-font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI",
    sans-serif;
  --mm-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mm-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --mm-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Modular scale, ~1.25 ratio, 16px base */
  --mm-text-xs: 0.75rem;
  --mm-text-sm: 0.875rem;
  --mm-text-base: 1rem;
  --mm-text-lg: 1.25rem;
  --mm-text-xl: 1.563rem;
  --mm-text-2xl: 1.953rem;
  --mm-text-3xl: 2.441rem;
  --mm-text-4xl: 3.052rem;

  --mm-leading-tight: 1.15;
  --mm-leading-snug: 1.35;
  --mm-leading-normal: 1.6;

  --mm-tracking-tight: -0.02em;
  --mm-tracking-wide: 0.08em;

  --mm-weight-normal: 400;
  --mm-weight-medium: 500;
  --mm-weight-semibold: 600;
  --mm-weight-bold: 700;

  /* ---- Spacing — 4 / 8px rhythm ------------------------------------ */
  --mm-space-1: 0.25rem;
  --mm-space-2: 0.5rem;
  --mm-space-3: 0.75rem;
  --mm-space-4: 1rem;
  --mm-space-5: 1.5rem;
  --mm-space-6: 2rem;
  --mm-space-7: 3rem;
  --mm-space-8: 4rem;
  --mm-space-9: 6rem;

  /* ---- Radii ------------------------------------------------------- */
  --mm-radius-sm: 0.375rem;
  --mm-radius-md: 0.625rem;
  --mm-radius-lg: 1rem;
  --mm-radius-full: 999px;

  --mm-border-width: 1px;

  /* ---- Layout ------------------------------------------------------ */
  --mm-content-width: 68rem;

  /* ---- Motion — crafted easing, sub-300ms UI ceiling (Emil) -------- */
  --mm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --mm-duration-fast: 130ms;
  --mm-duration-base: 200ms;
  --mm-duration-slow: 280ms;
}