/* Money Merch Design System v1.0 — sync with docs/spec/Money Merch Design System.html */
:root {
  /* Surfaces */
  --bg-0: #07090a;
  --bg-1: #0d1011;
  --bg-2: #14181a;
  --bg-3: #1b2023;
  --bg-4: #232a2e;
  --bg-sidebar: #0a0c0d;
  --bg-overlay: rgba(8, 10, 11, 0.72);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --fg-primary: #f3f6f4;
  --fg-secondary: #b6bdb9;
  --fg-tertiary: #7a8380;
  --fg-muted: #525a57;
  --fg-disabled: #353b39;

  /* Brand / accent */
  --accent: #c8f24a;
  --accent-hover: #d4f761;
  --accent-press: #b6dd3e;
  --accent-tint: rgba(200, 242, 74, 0.12);
  --accent-tint-strong: rgba(200, 242, 74, 0.22);
  --accent-glow: rgba(200, 242, 74, 0.35);
  --accent-fg: #0e1208;

  /* Status */
  --success: #4ade80;
  --success-tint: rgba(74, 222, 128, 0.12);
  --success-border: rgba(74, 222, 128, 0.28);

  --warning: #f5a524;
  --warning-tint: rgba(245, 165, 36, 0.12);
  --warning-border: rgba(245, 165, 36, 0.28);

  --danger: #f06464;
  --danger-tint: rgba(240, 100, 100, 0.12);
  --danger-border: rgba(240, 100, 100, 0.3);

  --info: #6aa9ff;
  --info-tint: rgba(106, 169, 255, 0.12);
  --info-border: rgba(106, 169, 255, 0.3);

  --magenta: #c97cf5;
  --magenta-tint: rgba(201, 124, 245, 0.12);
  --magenta-border: rgba(201, 124, 245, 0.3);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --glow-accent: 0 0 0 1px var(--accent-tint-strong), 0 8px 28px var(--accent-glow);

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Spacing */
  --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;

  /* Layout — fluid on narrow viewports */
  --page-max: 900px;
  --page-max-wide: 1200px;
  --page-pad-inline: clamp(12px, 4vw, 20px);
  --page-pad-block: clamp(20px, 5vw, 32px);

  /* Fluid type (mobile-first) */
  --text-h1: clamp(1.25rem, 1.1rem + 1.25vw, 1.5rem);
  --text-h2: clamp(1.125rem, 1rem + 0.75vw, 1.25rem);
  --text-h3: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
}