/* ── CSS VARIABLES ── */
:root {
  --brand-50: #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-200: #99f6e4;
  --brand-300: #5eead4;
  --brand-400: #2dd4bf;
  --brand-500: #14b8a6;
  --brand-600: #0d9488;
  --brand-700: #0f766e;
  --brand-800: #115e59;
  --brand-900: #134e4a;
  --brand-950: #042f2e;
  --surface-0: #09090b;
  --surface-50: #0f0f12;
  --surface-100: #18181b;
  --surface-200: #27272a;
  --surface-300: #3f3f46;
  --surface-400: #52525b;
  --surface-500: #9898a3;
  --surface-600: #a1a1aa;
  --surface-700: #d4d4d8;
  --surface-800: #e4e4e7;
  --surface-900: #f4f4f5;
  --surface-950: #fafafa;
  --navy: #192B60;
  --navy-deep: #17265D;
  --cyan: #73D5D7;
  --cyan-light: #A3FFFF;
  --accent-cyan: #70B7CC;
  --border-subtle: rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.1);
  --border-hover: rgba(255,255,255,0.2);
  --border-brand: rgba(20,184,166,0.3);
  --red-400: #f87171;
  --amber-400: #fbbf24;
  --purple-400: #c084fc;
}