// Base Colors
$color-darkest: var(--color-darkest);
$color-lightest: var(--color-lightest);
$color-light: var(--color-secondary-light);
$color-error: var(--color-error);
$color-warning: var(--color-warning);
$color-success: var(--color-success);

$color-primary: var(--color-primary);
$color-primary-light: var(--color-primary-light);
$color-primary-dark: var(--color-primary-dark);

$color-secondary: var(--color-secondary);
$color-secondary-light: var(--color-secondary-light);
$color-secondary-dark: var(--color-secondary-dark);

// Font Colors
$color-text-dark: var(--color-text-dark);
$color-text-dark-secondary: var(--color-text-dark-secondary);
$color-text-dark-hint: var(--color-text-dark-hint);

$color-text-light: var(--color-text-light);
$color-text-light-secondary: var(--color-text-light-secondary);
$color-text-light-hint: var(--color-text-light-hint);

$color-text-headline: var(--color-text-dark);
$color-text-subtitle: var(--color-text-dark);
$color-text-caption: var(--color-text-dark-secondary);

// Action Colors
$color-action-primary: var(--color-primary);
$color-action-secondary: var(--color-text-dark);

// Font Properties
$font-family: var(--font-family-sans-serif);
$font-size-headline-1: var(--font-size-headline-1);
$font-size-headline-2: var(--font-size-headline-2);
$font-size-headline-3: var(--font-size-headline-3);
$font-size-headline-4: var(--font-size-headline-4);
$font-size-headline-5: var(--font-size-headline-5);
$font-size-headline-6: var(--font-size-headline-6);
$font-size-subtitle-1: var(--font-size-subtitle-1);
$font-size-subtitle-2: var(--font-size-subtitle-2);
$font-size-body-1: var(--font-size-body-1);
$font-size-body-2: var(--font-size-body-2);
$font-size-caption:  var(--font-size-caption);

// Border Properties
$border-radius: var(--border-radius);
$border-color-dark: var(--border-color-dark);
$border-color-darker: var(--border-color-darker);

// Box Shadow Properties
$box-shadow-color: var(--box-shadow-color);
$box-shadow-sm: var(--box-shadow-sm);
$box-shadow-md: var(--box-shadow-md);
$box-shadow-lg: var(--box-shadow-lg);

// Responsive breakpoints
$breakpoints: (
  small: 512px,
  medium: 1024px,
  large: 1440px,
  xlarge: 2560px
);