/* ═══════════════════════════════════════════════════════════════
   COLOR SYSTEM — Single source of truth
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Base neutrals */
  --bg: #00000051;
  --white: #e8d9ca;
  --white-rgb: 226, 220, 214;

  /* Accent — Red */
  --red: rgb(240, 193, 124);
  --red-rgb: 240, 193, 124;
  --red-dim: rgba(var(--red-rgb), 0.08);
  --red-glow: rgba(var(--red-rgb), 0.05);
  --red-hover-bg: rgba(var(--red-rgb), 0.05);
  --red-hover-bg-soft: rgba(var(--red-rgb), 0.01);
  --red-hover: #00000075;

  /* Text variants (white-based) */
  --dim: rgba(var(--white-rgb), 0.35);
  --faint: rgba(var(--red-rgb), 0.01);
  --line: rgba(var(--white-rgb), 0.03);
  --text-15: rgba(var(--white-rgb), 0.15);
  --text-18: rgba(var(--white-rgb), 0.18);
  --text-20: rgba(var(--white-rgb), 0.2);
  --text-30: rgba(var(--white-rgb), 0.3);

  /* Panels & surfaces */
  --panel-bg: rgba(8, 8, 16, 0.075);
  --panel-border: rgba(var(--white-rgb), 0.05);
  --bar-bg: #05050a99;

  /* Buttons */
  --btn-ghost-bg: #ffffff10;
  --btn-ghost-blur: 15px;
}