:root {
  --color-primary: #f06292;
  --color-secondary: #6c7cff;
  --color-accent: #ffd36e;
  --color-dark: #20293a;
  --color-dark-soft: #5f6c82;
  --color-light: #fffaf8;
  --color-surface: rgba(255, 255, 255, 0.82);
  --color-surface-strong: rgba(255, 255, 255, 0.94);
  --color-border: rgba(138, 156, 196, 0.24);
  --color-border-strong: rgba(108, 124, 255, 0.28);
  --shadow-soft: 0 24px 60px rgba(99, 115, 151, 0.14);
  --shadow-card: 0 18px 40px rgba(86, 101, 137, 0.12);
  --shadow-pill: 0 14px 28px rgba(99, 114, 146, 0.12);
  --radius-card: 32px;
  --radius-panel: 28px;
  --radius-pill: 999px;
  --radius-chip: 20px;
  --font-display: "M PLUS Rounded 1c", "Avenir Next", sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}