/* Design tokens — colors, type, radii, motion */

:root {
  --canvas: #07080c;
  --elev-0: #0c0e14;
  --elev-1: #12151c;
  --elev-2: #181c26;
  --surface: rgba(22, 26, 36, 0.92);
  --surface-glass: rgba(18, 22, 32, 0.55);
  --stroke: rgba(255, 255, 255, 0.06);
  --stroke-strong: rgba(255, 255, 255, 0.11);
  --text: #f0f2f7;
  --text-dim: #9aa3b5;
  --text-faint: #6b7287;
  --accent: #e8a088;
  --accent-dim: rgba(232, 160, 136, 0.14);
  --focus: rgba(126, 200, 227, 0.55);
  --ok: #8fd4c1;
  --accent2: #7ec8e3;
  --rail-w: min(300px, 92vw);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.45);
  --font: "DM Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s;
  --t-mid: 0.28s;
  --scrollbar-thin: 5px;
  --scrollbar-comfort: 8px;
  --composer-textarea-min-h: 48px;
  --composer-textarea-max-h: 168px;
}

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