:root {
  /* Brand Colors */
  --color-primary: #2700d0;
  --color-on-primary: #ffffff;
  --color-primary-container: #3d23ff;
  --color-on-primary-container: #cac7ff;

  --color-secondary: #006a64;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #5af6e9;
  --color-on-secondary-container: #006f68;

  --color-tertiary: #283299;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #424bb2;
  --color-on-tertiary-container: #c5c8ff;

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

  /* Surfaces & Neutrals */
  --color-background: #f9f9f9;
  --color-on-background: #1a1c1c;

  --color-surface: #f9f9f9;
  --color-surface-dim: #dadada;
  --color-surface-bright: #f9f9f9;
  --color-surface-variant: #e2e2e2;
  --color-on-surface: #1a1c1c;
  --color-on-surface-variant: #464557;

  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f3f4;
  --color-surface-container: #eeeeee;
  --color-surface-container-high: #e8e8e8;
  --color-surface-container-highest: #e2e2e2;

  --color-inverse-surface: #2f3131;
  --color-inverse-on-surface: #f0f1f1;

  --color-outline: #777589;
  --color-outline-variant: #c7c4da;

  /* Fixed colors for highlights */
  --color-primary-fixed: #e2dfff;
  --color-primary-fixed-dim: #c3c0ff;
  --color-on-primary-fixed: #0f0069;
  --color-on-primary-fixed-variant: #2d00e6;

  --color-secondary-fixed: #5df9ec;
  --color-secondary-fixed-dim: #34dcd0;
  --color-on-secondary-fixed: #00201e;
  --color-on-secondary-fixed-variant: #00504b;

  --color-tertiary-fixed: #e0e0ff;
  --color-tertiary-fixed-dim: #bec2ff;
  --color-on-tertiary-fixed: #000569;
  --color-on-tertiary-fixed-variant: #313aa1;

  /* Glassmorphism settings */
  --glass-bg-light: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(26, 28, 28, 0.1);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-border-variant: rgba(255, 255, 255, 0.05);
  --glass-blur: 16px;

  /* Gradients */
  --gradient-start: #3d23ff;
  --gradient-end: #15cfc3;
  --gradient-flow: linear-gradient(90deg, #3d23ff 0%, #1c258f 45%, #15cfc3 100%);
  --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 100%);
  --gradient-btn: linear-gradient(135deg, #3d23ff 0%, #7000ff 50%, #00f2fe 100%);
  --gradient-btn-hover: linear-gradient(135deg, #5036ff 0%, #821aff 50%, #33f4ff 100%);

  /* Border Radii */
  --radius-sm: 0.25rem;
  --radius-default: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Layout and Spacing */
  --container-max: 1280px;
  --gutter: 2rem;
  --margin-desktop: 4rem;
  --margin-mobile: 1.5rem;
  --stack-unit: 0.5rem;
  --section-padding: 4rem;
}