:root {
  /* Clarity (light) */
  --bg: #FCFDFC;
  --surface: #F1F6F3;
  --surface-2: #E9F1EC;
  --soft: #EAF7F0;
  --line: #CFDDD5;
  --ink: #102C30;
  --ink-2: #506568;
  --control-border: #506568;

  /* Brand green: shape and accent on light, never text */
  --accent: #3CCEAB;
  --accent-text: #086E52;
  --on-accent: #06231C;

  /* Constellation stars: dots and shapes only */
  --travel: #5B5CFF;
  --rewards: #C5F04A;
  --rewards-text: #4F6B0A;
  --marketplace: #CC3383;

  /* Shape */
  --r-chip: 6px;
  --r-btn: 12px;
  --r-card: 16px;
  --r-box: 24px;
  --r-pill: 999px;

  /* Type and motion */
  --font: 'Geist', 'Segoe UI', Arial, Helvetica, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-ui: 200ms;

  /* Depth */
  --glass: rgba(255, 255, 255, 0.66);
  --shadow-card: 0 1px 2px rgba(16, 44, 48, 0.05), 0 10px 28px -10px rgba(16, 44, 48, 0.16);
  --shadow-float: 0 2px 6px rgba(16, 44, 48, 0.06), 0 28px 60px -16px rgba(16, 44, 48, 0.26);
}