/* Poise — color tokens. Premium dark mode: near-black canvas, pastel mint/sage accents. */

:root {
  /* Base palette */
  --black: #020003;
  --gray-850: #1A181B;
  --gray-800: #2A292B;
  --gray-700: #3A393C;
  --gray-400: #828183;
  --gray-100: #E9E7EA;

  --mint: #BDEECD;
  --sage: #C3D6B3;
  --cyan-soft: #B0E7E4;

  --amber: #FFB74D;
  --red: #FF6363;

  /* Semantic — canvas & surfaces */
  --bg-canvas: var(--black);
  --surface-card: var(--gray-850);
  --surface-elevated: var(--gray-800);
  --border-hairline: rgba(233, 231, 234, 0.08);
  --border-strong: rgba(233, 231, 234, 0.14);

  /* Semantic — text */
  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-400);
  --text-accent: var(--mint);
  --text-on-accent: #06140B; /* near-black green for text on mint/gradient fills */

  /* Semantic — accent & CTA */
  --accent: var(--mint);
  --accent-muted: rgba(189, 238, 205, 0.14);
  --gradient-cta: linear-gradient(90deg, var(--sage) 0%, var(--mint) 55%, var(--cyan-soft) 100%);
  --glow-mint: 0 0 32px rgba(189, 238, 205, 0.18);

  /* Semantic — status */
  --status-good: var(--mint);
  --status-warn: var(--amber);
  --status-bad: var(--red);
  --status-warn-muted: rgba(255, 183, 77, 0.14);
  --status-bad-muted: rgba(255, 99, 99, 0.14);
}