/* Design tokens — Stripe Dashboard inspired */
:root {
  /* Surfaces */
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-sunken: #fbfbfc;
  --surface-hover: #f6f8fb;

  /* Borders */
  --border: #e3e8ee;
  --border-strong: #cbd2d9;

  /* Text */
  --ink: #1a1f36;
  --ink-2: #3c4257;
  --muted: #697386;
  --faint: #a3acb9;

  /* Accent (Stripe indigo) */
  --accent: #635bff;
  --accent-hover: #524ce0;
  --accent-ink: #4338ca;
  --accent-soft: #f0eefe;
  --accent-soft-border: #ded9ff;

  /* Semantic */
  --success: #0a8a4a;
  --success-soft: #e3f7ee;
  --warning: #a35b00;
  --warning-soft: #fff3d6;
  --danger: #c0392b;
  --danger-soft: #fdecea;
  --info: #0a5cd8;
  --info-soft: #e8f0fe;

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(20, 25, 40, .06);
  --shadow-md: 0 4px 12px rgba(20, 25, 40, .08);
  --shadow-lg: 0 20px 48px -12px rgba(20, 25, 40, .22);

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 60px;

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}