:root {
  /* Colors */
  --primary: #C5131B;
  --primary-dark: #9c1718;
  --primary-light: #d41a22;
  --primary-lighter: rgba(255, 0, 0, 0.1);

  --secondary: #5A6C7D;
  --secondary-dark: #3E4C59;
  --secondary-light: #7A8C9D;
  --secondary-lighter: #F9FAFB;

  --success: #10B981;
  --success-light: #f0fdf4;
  --success-dark: #00B958FF;
  --warning: #F59E0B;
  --warning-dark: #FE8B0DFF;
  --error: #EF4444;
  --error-dark: var(--primary-dark);
  --info: #3B82F6;

  --text-primary: #333333;
  --text-secondary: #4F5979;
  --text-tertiary: #959BAF;
  --text-light: #F9FAFB;

  /* Color Scale - Generic color palette for reuse across components */
  /* Blue */
  --color-blue-50: #EFF6FF;
  --color-blue-500: #3B82F6;
  --color-blue-700: #1E40AF;

  /* Green */
  --color-green-50: #F0FDF4;
  --color-green-500: #10B981;
  --color-green-700: #15803D;

  /* Yellow/Orange */
  --color-yellow-50: #FEF3C7;
  --color-orange-500: #F59E0B;
  --color-yellow-900: #92400E;

  /* Red */
  --color-red-50: #FEE2E2;
  --color-red-500: #EF4444;
  --color-red-700: #991B1B;

  /* Gray */
  --color-gray-50: #F9FAFB;
  --color-gray-500: #6B7280;
  --color-gray-700: #374151;

  /* Backgrounds */
  --body-bg: #F5F6FA;
  --surface-bg: #FFFFFF;
  --surface-alt-bg: #F9FAFB;
  --surface-bg-hover: #f9fafb;

  /* Text Colors */

  /* Borders */
  --border-primary: #959BAF;
  --border-secondary: #E4E9F3;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 10px;
  --border-radius-xl: 15px;

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 30px;
  --spacing-lg: 40px;
  --spacing-xl: 50px;
  --spacing-2xl: 60px;

  --spacing-fixed-h-xxs: 2px;
  --spacing-fixed-h-xs: 4px;
  --spacing-fixed-h-sm: 6px;
  --spacing-fixed-h-md: 8px;
  --spacing-fixed-h-lg: 10px;
  --spacing-fixed-h-xl: 12px;

  --spacing-fixed-v-xxs: 4px;
  --spacing-fixed-v-xs: 9px;
  --spacing-fixed-v-sm: 12px;
  --spacing-fixed-v-md: 16px;
  --spacing-fixed-v-lg: 20px;
  --spacing-fixed-v-xl: 24px;

  /* Shadows */
  --shadow-xs: 0 0 0 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 0 11px 0 rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Typography */
  --font-family-base: Gotham;

  --letter-spacing: -0.03em;

  --font-size-xs: 0.625rem;     /* 10px */
  --font-size-sm: 0.75rem;      /* 12px */
  --font-size-base: 0.8125rem;  /* 13px */
  --font-size-lg: 0.875rem;     /* 14px */
  --font-size-xl: 1rem;         /* 16px */
  --font-size-2xl: 1.125rem;    /* 18px */
  --font-size-3xl: 1.5rem;      /* 24px */
  --font-size-4xl: 1.875rem;    /* 30px */

  --font-weight-normal: 300;
  --font-weight-semibold: 400;
  --font-weight-bold: 500;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Z-index layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

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

  /* Buttons */
  --btn-primary-text-color: #FFFFFF;
  --btn-primary-bg-color: var(--primary);
  --btn-primary-border-color: transparent;
  --btn-primary-text-color-on: #ffffff;
  --btn-primary-bg-color-on: var(--primary-light);
  --btn-primary-border-color-on: transparent;

  --btn-secondary-text-color: #000000;
  --btn-secondary-bg-color: #e4e9f3;
  --btn-secondary-border-color: transparent;
  --btn-secondary-text-color-on: #000000;
  --btn-secondary-bg-color-on: #ecf0f6;
  --btn-secondary-border-color-on: transparent;

  --btn-tertiary-text-color: var(--primary);
  --btn-tertiary-bg-color: #ffffff;
  --btn-tertiary-border-color: #e4e9f3;
  --btn-tertiary-text-color-on: var(--primary-light);
  --btn-tertiary-bg-color-on: #ffffff;
  --btn-tertiary-border-color-on: var(--primary);

  --btn-success-text-color: #ffffff;
  --btn-success-bg-color: var(--success);
  --btn-success-border-color: transparent;
  --btn-success-text-color-on: #ffffff;
  --btn-success-bg-color-on: var(--success-dark);
  --btn-success-border-color-on: transparent;

  --btn-warning-text-color: #ffffff;
  --btn-warning-bg-color: var(--warning);
  --btn-warning-border-color: transparent;
  --btn-warning-text-color-on: #ffffff;
  --btn-warning-bg-color-on: var(--warning-dark);
  --btn-warning-border-color-on: transparent;

  /* Forms */
  --form-input-border-color: #E4E9F3;
  --form-input-bg-color: #ffffff;
  --form-input-disabled-bg-color: #fafafa;
  --form-input-text-color: var(--text-primary);
  --form-input-placeholder-color: var(--text-tertiary);
  --form-input-focus-border-color: var(--text-tertiary);
}