:root {
  /* Brand */
  --color-primary:        #3F51B5;
  --color-primary-dark:   #303F9F;
  --color-primary-light:  #5C6BC0;
  --color-secondary:      #3F51B5;
  --color-secondary-dark: #303F9F;
  --color-secondary-light:#7986CB;
  --color-accent:         #FF7043;
  --color-accent-dark:    #E64A19;

  /* Tier colors */
  --color-basic:          #3F51B5;
  --color-basic-light:    #E8EAF6;
  --color-premium:        #FF7043;
  --color-premium-light:  #FFF3EE;

  /* Neutrals */
  --color-bg:             #F5F5F5;
  --color-surface:        #FFFFFF;
  --color-border:         #E0E0E0;
  --color-border-dark:    #BDBDBD;

  /* Text */
  --color-text:           #1A1A1A;
  --color-text-secondary: #555555;
  --color-text-muted:     #888888;
  --color-text-inverse:   #FFFFFF;

  /* Status */
  --color-success:        #2E7D32;
  --color-success-light:  #E8F5E9;
  --color-error:          #C62828;
  --color-error-light:    #FFEBEE;
  --color-warning:        #E65100;
  --color-warning-light:  #FFF3E0;
  --color-savings:        #1B5E20;
  --color-savings-light:  #E8F5E9;

  /* Typography */
  --font-family:          'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-xs:         0.75rem;
  --font-size-sm:         0.875rem;
  --font-size-base:       1rem;
  --font-size-lg:         1.125rem;
  --font-size-xl:         1.25rem;
  --font-size-2xl:        1.5rem;
  --font-size-3xl:        1.875rem;
  --font-size-4xl:        2.25rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,.10), 0 10px 10px rgba(0,0,0,.04);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Layout */
  --container-max: 1280px;
  --header-height: 64px;
  --subnav-height: 48px;
}