:root {
  /* ============================
     Primary Colors (Deep Purple - M3 Tonal Palette)
     ============================ */
  --color-primary-50: #f6edff;
  --color-primary-100: #e9ddff;
  --color-primary-200: #d0bcff;
  --color-primary-300: #b69df8;
  --color-primary-400: #9a7bed;
  --color-primary-500: #7f57c2;
  --color-primary-600: #6750a4;
  --color-primary-700: #4f378b;
  --color-primary-800: #381e72;
  --color-primary-900: #21005d;
  --color-primary-main: #6750a4;
  --color-primary-light: #d0bcff;
  --color-primary-dark: #21005d;

  /* ============================
     Secondary Colors (Purple Gray)
     ============================ */
  --color-secondary-50: #f8f3ff;
  --color-secondary-100: #e8def8;
  --color-secondary-200: #ccc2dc;
  --color-secondary-300: #b0a6be;
  --color-secondary-400: #958da5;
  --color-secondary-500: #7a7289;
  --color-secondary-600: #625b71;
  --color-secondary-700: #4a4458;
  --color-secondary-800: #332d41;
  --color-secondary-900: #1d192b;
  --color-secondary-main: #625b71;
  --color-secondary-light: #ccc2dc;
  --color-secondary-dark: #1d192b;

  /* ============================
     Tertiary Colors (Rose)
     ============================ */
  --color-tertiary-50: #ffecf1;
  --color-tertiary-100: #ffd8e4;
  --color-tertiary-200: #efb8c8;
  --color-tertiary-300: #d29dac;
  --color-tertiary-400: #b58392;
  --color-tertiary-500: #986977;
  --color-tertiary-600: #7d5260;
  --color-tertiary-700: #633b48;
  --color-tertiary-800: #492532;
  --color-tertiary-900: #31111d;
  --color-tertiary-main: #7d5260;
  --color-tertiary-light: #ffd8e4;
  --color-tertiary-dark: #31111d;

  /* ============================
     Surface & Background
     ============================ */
  --color-surface-default: #fffbfe;
  --color-surface-dim: #ded8e1;
  --color-surface-bright: #fffbfe;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f7f2fa;
  --color-surface-container: #f3edf7;
  --color-surface-container-high: #ece6f0;
  --color-surface-container-highest: #e6e0e9;
  --color-background: #f7f2fa;

  /* ============================
     Neutral Colors
     ============================ */
  --color-neutral-0: #000000;
  --color-neutral-10: #1d1b20;
  --color-neutral-20: #322f35;
  --color-neutral-30: #48464c;
  --color-neutral-40: #605d64;
  --color-neutral-50: #79767d;
  --color-neutral-60: #938f96;
  --color-neutral-70: #aea9b1;
  --color-neutral-80: #cac4cf;
  --color-neutral-90: #e6e0e9;
  --color-neutral-95: #f5eff7;
  --color-neutral-99: #fffbff;
  --color-neutral-100: #ffffff;

  /* Text Colors */
  --color-text-primary: #1d1b20;
  --color-text-secondary: #49454f;
  --color-text-tertiary: #79747e;
  --color-text-inverse: #ffffff;

  /* Border & Outline */
  --color-border-default: #79747e;
  --color-border-light: #cac4d0;

  /* ============================
     Error, Success, Warning, Info
     ============================ */
  --color-error-main: #b3261e;
  --color-error-light: #f9dedc;
  --color-error-dark: #8c1d18;
  --color-success-main: #386a20;
  --color-success-light: #c4efb8;
  --color-warning-main: #7d5800;
  --color-warning-light: #ffdea8;
  --color-info-main: #0061a4;
  --color-info-light: #d1e4ff;

  /* ============================
     Typography Scale
     ============================ */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Display */
  --font-size-display-large: 57px;
  --line-height-display-large: 64px;
  --letter-spacing-display-large: -0.25px;

  --font-size-display-medium: 45px;
  --line-height-display-medium: 52px;
  --letter-spacing-display-medium: 0px;

  --font-size-display-small: 36px;
  --line-height-display-small: 44px;
  --letter-spacing-display-small: 0px;

  /* Headline */
  --font-size-headline-large: 32px;
  --line-height-headline-large: 40px;
  --letter-spacing-headline-large: 0px;
  --font-weight-headline-large: 400;

  --font-size-headline-medium: 28px;
  --line-height-headline-medium: 36px;
  --letter-spacing-headline-medium: 0px;

  --font-size-headline-small: 24px;
  --line-height-headline-small: 32px;
  --letter-spacing-headline-small: 0px;

  /* Title */
  --font-size-title-large: 22px;
  --line-height-title-large: 28px;
  --letter-spacing-title-large: 0px;
  --font-weight-title-large: 500;

  --font-size-title-medium: 16px;
  --line-height-title-medium: 24px;
  --letter-spacing-title-medium: 0.15px;

  --font-size-title-small: 14px;
  --line-height-title-small: 20px;
  --letter-spacing-title-small: 0.1px;

  /* Label */
  --font-size-label-large: 14px;
  --line-height-label-large: 20px;
  --letter-spacing-label-large: 0.1px;

  --font-size-label-medium: 12px;
  --line-height-label-medium: 16px;
  --letter-spacing-label-medium: 0.5px;

  --font-size-label-small: 11px;
  --line-height-label-small: 16px;
  --letter-spacing-label-small: 0.5px;

  /* Body */
  --font-size-body-large: 16px;
  --line-height-body-large: 24px;
  --letter-spacing-body-large: 0.5px;

  --font-size-body-medium: 14px;
  --line-height-body-medium: 20px;
  --letter-spacing-body-medium: 0.25px;

  --font-size-body-small: 12px;
  --line-height-body-small: 16px;
  --letter-spacing-body-small: 0.4px;

  /* ============================
     Spacing System (4px base)
     ============================ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;
  --spacing-6xl: 56px;
  --spacing-7xl: 64px;
  --spacing-8xl: 72px;
  --spacing-9xl: 80px;

  /* ============================
     Border Radius (8px base)
     ============================ */
  --border-radius-none: 0;
  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 20px;
  --border-radius-2xl: 24px;
  --border-radius-3xl: 28px;
  --border-radius-full: 9999px;

  /* ============================
     Box Shadow (Material Design 3)
     ============================ */
  --shadow-level-0: 0 0 0 0 transparent;
  --shadow-level-1: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-level-2: 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-level-3: 0 4px 10px rgba(0, 0, 0, 0.12);
  --shadow-level-4: 0 6px 15px rgba(0, 0, 0, 0.14);
  --shadow-level-5: 0 8px 20px rgba(0, 0, 0, 0.16);

  /* ============================
     Animation Duration (200-500ms)
     ============================ */
  --duration-instant: 50ms;
  --duration-fast: 100ms;
  --duration-short: 200ms;
  --duration-medium: 300ms;
  --duration-long: 400ms;
  --duration-slow: 500ms;

  /* ============================
     Animation Easing
     ============================ */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* ============================
     Component Sizes
     ============================ */
  --button-height-sm: 36px;
  --button-height-md: 48px;
  --button-height-lg: 56px;

  --touch-target-minimum: 48px;
  --touch-target-recommended: 56px;

  --icon-size-xs: 16px;
  --icon-size-sm: 20px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 40px;

  /* ============================
     Container Widths
     ============================ */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-2xl);

  /* ============================
     Breakpoints
     ============================ */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 1023px;
  --breakpoint-desktop: 1024px;

  /* ============================
     Z-index Scale
     ============================ */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}