:root {
  --color-deep-navy: #2B2D62;
  --color-bubble-cyan: #2CC4D9;
  --color-primary: #006875;
  --color-primary-container: #004d56;
  --color-primary-fixed: #9bf0ff;
  --color-primary-fixed-dim: #4bd8ed;
  --color-secondary: #ad2c4f;
  --color-secondary-container: #fd6989;
  --color-secondary-fixed: #ffd9dd;
  --color-secondary-fixed-dim: #ffb2bd;
  --color-magic-purple: #A883FF;
  --color-tertiary: #735c00;
  --color-tertiary-container: #d7af00;
  --color-tertiary-fixed: #ffe083;
  --color-tertiary-fixed-dim: #edc221;
  --color-on-tertiary-fixed: #231b00;
  --color-background: #fdf9f0;
  --color-surface: #fdf9f0;
  --color-surface-container: #f1eee5;
  --color-surface-container-high: #ece8df;
  --color-surface-container-highest: #e6e2d9;
  --color-surface-container-low: #f7f3ea;
  --color-surface-container-lowest: #ffffff;
  --color-on-surface: #1c1c17;
  --color-on-surface-variant: #3c494b;
  --color-outline: #6c797c;
  --color-outline-variant: #bbc9cc;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-white: #ffffff;

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;

  --shadow-cyan: 6px 6px 0px rgba(44, 196, 217, 0.4);
  --shadow-pink: 6px 6px 0px rgba(253, 105, 137, 0.4);
  --shadow-purple: 6px 6px 0px rgba(168, 131, 255, 0.4);
  --shadow-yellow: 6px 6px 0px rgba(215, 175, 0, 0.4);
  --shadow-navy-xs: 2px 2px 0px #2B2D62;
  --shadow-navy-sm: 3px 3px 0px #2B2D62;
  --shadow-navy-md: 4px 4px 0px #2B2D62;
  --shadow-navy-lg: 6px 6px 0px #2B2D62;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-full: 9999px;

  --transition-bounce: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-smooth: all 0.25s ease-in-out;
}