/*
 * Mdata design tokens — cream + ink ladder, teal accent, bot-ui-grade craft layer.
 * Identity (cream #f7f4ed + teal #0ea5a4) preserved; depth/glass/glow/motion added.
 * Light theme only. Every original token name + value kept (locked by tokens.spec.mjs).
 */
:root {
  /* ── Surfaces ──────────────────────────────────────────────── */
  --cream: #f7f4ed;
  --cream-light: #fcfbf8;
  --cream-border: #eceae4;
  --cream-raised: #ffffff;       /* highest paper for floating cards */
  --cream-sunk: #f1eee6;         /* recessed wells / tracks */

  /* ── Ink ladder ────────────────────────────────────────────── */
  --charcoal: #1c1c1c;
  --charcoal-83: rgba(28, 28, 28, 0.83);
  --charcoal-40: rgba(28, 28, 28, 0.40);
  --charcoal-08: rgba(28, 28, 28, 0.08);
  --charcoal-04: rgba(28, 28, 28, 0.04);
  --muted: #4a4a48;              /* darkened from #5f5f5d → 4.6:1 on cream (WCAG AA) */
  --muted-soft: #6b6b69;         /* for non-essential meta only */

  /* ── Brand accent — teal ───────────────────────────────────── */
  --accent: #0ea5a4;
  --accent-dark: #0b8484;
  --accent-deep: #0a6e6e;
  --accent-tint: rgba(14, 165, 164, 0.12);
  --accent-tint-strong: rgba(14, 165, 164, 0.20);
  --accent-50: #e6f6f6;          /* lightest teal wash */

  /* ── Semantic ──────────────────────────────────────────────── */
  --green: #149e61;
  --green-tint: rgba(20, 158, 97, 0.16);
  --green-deep: #026b3f;
  --red: #dc2626;
  --red-tint: rgba(220, 38, 38, 0.14);
  --red-deep: #7f1d1d;
  --amber: #d97706;
  --amber-tint: rgba(217, 119, 6, 0.14);
  --amber-deep: #a16207;

  /* ── Per-metric chip colors ────────────────────────────────── */
  --chip-price: var(--accent);
  --chip-seo: #7132f5;
  --chip-reviews: var(--amber);
  --chip-quality: var(--green);
  --chip-security: #2563eb;

  /* ── Radius scale ──────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-md-plus: 11px;
  --radius-lg: 12px;
  --radius-lg-plus: 14px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-xxl: 22px;
  --radius-pill: 999px;

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

  /* ── Motion ────────────────────────────────────────────────── */
  --motion-fast: 200ms;
  --motion-med: 320ms;
  --motion-slow: 560ms;
  --motion-ease: cubic-bezier(0.32, 0.72, 0, 1);   /* apple spring */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);   /* alias */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* gentle settle */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Elevation — layered recipes (inset highlight + drop + ambient) ── */
  --inset-dark:
    rgba(255, 255, 255, 0.20) 0 0.5px 0 0 inset,
    rgba(0, 0, 0, 0.20)       0 0 0 0.5px inset,
    rgba(0, 0, 0, 0.05)       0 1px 2px 0;
  --inset-accent:
    rgba(255, 255, 255, 0.25)     0 0.5px 0 0 inset,
    rgba(0, 0, 0, 0.18)           0 0 0 0.5px inset,
    rgba(14, 165, 164, 0.30)      0 1px 2px,
    rgba(14, 165, 164, 0.18)      0 4px 12px;
  --inset-paper:
    rgba(255, 255, 255, 0.6)  0 0.5px 0 0 inset,
    var(--charcoal-08)        0 0 0 1px,
    rgba(0, 0, 0, 0.04)       0 1px 2px;

  /* Named shadow ladder (warm-tinted, light-mode tuned) */
  --shadow-xs:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 2px rgba(28,24,20,0.05);
  --shadow-sm:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 2px rgba(28,24,20,0.05),
    0 2px 6px -2px rgba(28,24,20,0.08);
  --shadow-md:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 1px 2px rgba(28,24,20,0.05),
    0 8px 24px -12px rgba(28,24,20,0.18);
  --shadow-lg:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 2px 4px rgba(28,24,20,0.05),
    0 18px 44px -18px rgba(28,24,20,0.22);
  --shadow-xl:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 4px 8px rgba(28,24,20,0.06),
    0 30px 70px -24px rgba(28,24,20,0.28);
  --shadow-float:
    0 24px 70px -20px rgba(28,24,20,0.30),
    inset 0 0 0 1px rgba(255,255,255,0.6);

  /* Teal glow recipes — for live/active/accent surfaces */
  --glow-accent:
    0 0 0 1px rgba(14,165,164,0.22),
    0 0 22px -2px rgba(14,165,164,0.28);
  --glow-accent-strong:
    0 0 0 1px rgba(14,165,164,0.40),
    0 0 30px -2px rgba(14,165,164,0.45),
    0 0 64px -8px rgba(14,165,164,0.25);
  --glow-soft: 0 0 28px -6px rgba(14,165,164,0.18);

  /* ── Glass ─────────────────────────────────────────────────── */
  --glass-bg: rgba(247, 244, 237, 0.72);
  --glass-bg-strong: rgba(252, 251, 248, 0.85);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: saturate(180%) blur(20px);

  /* ── Type stacks ───────────────────────────────────────────── */
  --font-body: 'IBM Plex Sans', 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-chrome: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'IBM Plex Sans', system-ui, sans-serif;

  /* ── Type scale (fluid display + fixed body ladder) ────────── */
  --fs-hero: clamp(40px, 7.5vw, 76px);
  --fs-display-xl: clamp(34px, 5vw, 56px);
  --fs-display-lg: clamp(28px, 3.4vw, 40px);
  --fs-display-1: clamp(24px, 2.4vw, 32px);
  --fs-display-2: 24px;
  --fs-display-3: 20px;
  --fs-body-lg: 16px;
  --fs-body: 14px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-label: 11px;
  --fs-tiny: 10px;

  /* Tracking + leading */
  --tracking-hero: -0.03em;
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.08em;       /* mono eyebrows / labels */
  --leading-tight: 1.06;
  --leading-snug: 1.32;
  --leading-normal: 1.55;

  /* Layout */
  --maxw-prose: 720px;
  --maxw-app: 1120px;
  --maxw-wide: 1320px;

  /* ── BI numeric + elevation (additive — does not shadow locked tokens) ── */
  --tracking-num: -0.012em;          /* tighten tabular display figures */
  --shadow-ring:
    0 0 0 1px var(--charcoal-08),
    0 1px 2px rgba(28, 24, 20, 0.04);
  --shadow-ring-hover:
    0 0 0 1px var(--accent-tint-strong),
    0 8px 22px -10px rgba(14, 165, 164, 0.30);
}

/* Tabular, evenly-spaced figures everywhere numbers are compared (data-grade). */
.kpi-tile-value, .stat-chip-v, .h2h-verdict-agg, .h2h-m-val, .ev-metric-score,
.briefing-verdict, .weights-priority, .agg-score, .grid-cell-score {
  font-feature-settings: "tnum", "lnum";
  letter-spacing: var(--tracking-num);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-feature-settings: "lnum", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body { overflow-x: clip; max-width: 100vw; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}