:root {
  /* LIGHT MODE (Default) */
  --color-background: #fcf8ff;
  --color-on-background: #1b1b24;
  --color-surface: #fcf8ff;
  --color-surface-dim: #dbd8e5;
  --color-surface-bright: #fcf8ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f2ff;
  --color-surface-container: #efecf9;
  --color-surface-container-high: #eae6f3;
  --color-surface-container-highest: #e4e1ed;
  --color-on-surface: #1b1b24;
  --color-surface-variant: #e4e1ed;
  --color-on-surface-variant: #464555;
  --color-surface-tint: #4948de;
  --color-inverse-surface: #1b1b24;
  --color-inverse-on-surface: #f2effc;

  --color-primary: #413fd6;
  --color-on-primary: #ffffff;
  --color-primary-container: #5b5bf0;
  --color-on-primary-container: #f6f2ff;
  --color-primary-fixed: #e1dfff;
  --color-primary-fixed-dim: #c1c1ff;
  --color-on-primary-fixed: #09006b;
  --color-on-primary-fixed-variant: #2e29c6;
  --color-inverse-primary: #c1c1ff;

  --color-secondary: #515f74;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #d5e3fc;
  --color-on-secondary-container: #57657a;
  --color-secondary-fixed: #d5e3fc;
  --color-secondary-fixed-dim: #b9c7df;
  --color-on-secondary-fixed: #0d1c2e;
  --color-on-secondary-fixed-variant: #3a485b;

  --color-tertiary: #8f4000;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #b55300;
  --color-on-tertiary-container: #fff2ec;
  --color-tertiary-fixed: #ffdbc9;
  --color-tertiary-fixed-dim: #ffb68d;
  --color-on-tertiary-fixed: #321200;
  --color-on-tertiary-fixed-variant: #763400;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --color-outline: #767586;
  --color-outline-variant: #c7c4d7;

  /* Mesh Gradient Colors */
  --mesh-color-1: #fcf8ff;
  --mesh-color-2: #efecf9;
  --mesh-color-3: #e1dfff;
  --mesh-color-4: #f5f2ff;
}

.dark {
  /* DARK MODE */
  --color-background: #0a0a0c;
  --color-on-background: #f8fafc;
  --color-surface: #111114;
  --color-surface-dim: #0a0a0c;
  --color-surface-bright: #1c1c21;
  --color-surface-container-lowest: #050505;
  --color-surface-container-low: #0f0f12;
  --color-surface-container: #17171c;
  --color-surface-container-high: #202026;
  --color-surface-container-highest: #2d2d35;
  --color-on-surface: #f1f5f9;
  --color-surface-variant: #2d2d35;
  --color-on-surface-variant: #94a3b8;
  --color-surface-tint: #818cf8;
  --color-inverse-surface: #f1f5f9;
  --color-inverse-on-surface: #0a0a0c;

  --color-primary: #818cf8;
  --color-on-primary: #ffffff;
  --color-primary-container: #3730a3;
  --color-on-primary-container: #e0e7ff;
  --color-primary-fixed: #c1c1ff;
  --color-primary-fixed-dim: #818cf8;
  --color-on-primary-fixed: #000000;
  --color-on-primary-fixed-variant: #3730a3;
  --color-inverse-primary: #413fd6;

  --color-secondary: #94a3b8;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #1e293b;
  --color-on-secondary-container: #cbd5e1;
  --color-secondary-fixed: #b9c7df;
  --color-secondary-fixed-dim: #94a3b8;
  --color-on-secondary-fixed: #000000;
  --color-on-secondary-fixed-variant: #334155;

  --color-tertiary: #fb923c;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #7c2d12;
  --color-on-tertiary-container: #ffedd5;
  --color-tertiary-fixed: #8f4000;
  --color-tertiary-fixed-dim: #fb923c;
  --color-on-tertiary-fixed: #ffedd5;
  --color-on-tertiary-fixed-variant: #fed7aa;

  --color-error: #f87171;
  --color-on-error: #450a0a;
  --color-error-container: #991b1b;
  --color-on-error-container: #fee2e2;

  --color-outline: #475569;
  --color-outline-variant: #334155;

  /* Mesh Gradient Colors */
  --mesh-color-1: #050505;
  --mesh-color-2: #0f172a;
  --mesh-color-3: #1e1b4b;
  --mesh-color-4: #020617;
}