:root {
  --brand-50: #e9f5fe;
  --brand-100: #d0ebfd;
  --brand-200: #a6d5fa;
  --brand-400: #4dabf5;
  --brand-500: #2196f3;
  --brand-600: #1a78c2;
  --brand-800: #0d3c61;
  --brand-900: #071e31;

  --neutral-0: #ffffff;
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-750: #293548;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  --functional-red-100: #fdeceb;
  --functional-red-400: #ea615d;
  --functional-red-500: #e53935;
  --functional-red-600: #b72e2a;
  --functional-red-900: #380806;

  --functional-orange-100: #fdf5ea;
  --functional-orange-400: #eaa951;
  --functional-orange-500: #e59926;
  --functional-orange-600: #b77a1e;
  --functional-orange-900: #382305;

  --primary: #2196f3;
  --secondary: #1565c0;
  --gradient-blue: linear-gradient(90deg, #1565c0 0%, #1565c0 0.01%, #2196f3 100%);
  --radius: 8px;

  --spacing-xsmall: 4px;
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  --spacing-xlarge: 32px;

  --font-family-base: 'Lato', sans-serif;

  --text-size-title: 24px;
  --text-size-subtitle: 20px;
  --text-size-paragraph: 16px;
  --text-size-small: 14px;
  --text-size-xsmall: 12px;
  --text-size-mini: 10px;
  --text-size-button: 16px;

  --text-line-height-title: 32px;
  --text-line-height-subtitle: 24px;
  --text-line-height-paragraph: 20px;
  --text-line-height-small: 16px;
  --text-line-height-xsmall: 16px;
  --text-line-height-mini: 12px;
  --text-line-height-button: 20px;

  --icon-w-sm: 20px;
  --icon-w-md: 24px;
  --icon-w-lg: 32px;
  --icon-p-sm: 4px;
  --icon-p-md: 6px;
  --icon-p-lg: 8px;

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-500);
  --text-tertiary: var(--neutral-400);
  --text-brand: var(--brand-500);
  --text-disabled: var(--neutral-400);
  --text-light: var(--neutral-0);
  --text-error: var(--functional-red-500);
  --text-warning: var(--functional-orange-500);
  --text-success: var(--brand-500);
  --text-info: var(--brand-500);

  --text-primary-hover: var(--neutral-800);
  --text-error-hover: var(--functional-red-600);
  --text-warning-hover: var(--functional-orange-600);
  --text-success-hover: var(--brand-600);
  --text-brand-hover: var(--brand-600);
  --text-neutral: var(--text-primary);
  --text-neutral-hover: var(--text-primary-hover);

  --surface-primary: var(--neutral-0);
  --surface-primary-alt: var(--neutral-50);
  --surface-secondary: var(--neutral-100);
  --surface-tertiary: var(--neutral-200);
  --surface-quaternary: var(--neutral-300);
  --surface-brand: var(--brand-500);
  --surface-disabled: var(--neutral-300);
  --surface-error: var(--functional-red-100);
  --surface-warning: var(--functional-orange-100);
  --surface-success: var(--brand-50);
  --surface-info: var(--brand-50);

  --surface-error-hover: var(--functional-red-600);
  --surface-warning-hover: var(--functional-orange-600);
  --surface-success-hover: var(--brand-600);
  --surface-brand-hover: var(--brand-600);

  --border-primary: var(--text-primary);
  --border-secondary: var(--text-secondary);
  --border-brand: var(--text-brand);
  --border-separator: var(--neutral-300);
  --border-disabled: var(--text-disabled);

  --border-error: var(--text-error);
  --border-warning: var(--text-warning);
  --border-success: var(--text-success);
  --border-info: var(--text-info);

  --icon-error: var(--text-error);
  --icon-warning: var(--text-warning);
  --icon-success: var(--text-success);
  --icon-info: var(--text-info);

  --tab-group-color-red: #ef4444;
  --tab-group-color-orange: #f97316;
  --tab-group-color-yellow: #eab308;
  --tab-group-color-lime: #84cc16;
  --tab-group-color-blue: var(--brand-500);
  --tab-group-color-indigo: #6366f1;
  --tab-group-color-purple: #a855f7;
  --tab-group-color-pink: #ec4899;
  --tab-group-color-gray: var(--neutral-400);
}

.dark-theme, [data-theme="dark"] {
  --text-primary: var(--neutral-0);
  --text-secondary: var(--neutral-300);
  --text-tertiary: var(--neutral-400);
  --text-disabled: var(--neutral-500);

  --text-primary-hover: var(--neutral-100);
  --text-neutral: var(--text-primary);
  --text-neutral-hover: var(--text-primary-hover);

  --text-error-hover: var(--functional-red-400);
  --text-warning-hover: var(--functional-orange-400);
  --text-success-hover: var(--brand-400);
  --text-brand-hover: var(--brand-400);

  --surface-primary: var(--neutral-800);
  --surface-primary-alt: var(--neutral-750);
  --surface-secondary: var(--neutral-900);
  --surface-tertiary: var(--neutral-700);
  --surface-quaternary: var(--neutral-600);
  --surface-disabled: var(--neutral-700);
  --surface-error: var(--functional-red-900);
  --surface-warning: var(--functional-orange-900);
  --surface-success: var(--brand-900);
  --surface-info: var(--brand-900);

  --surface-error-hover: var(--functional-red-600);
  --surface-warning-hover: var(--functional-orange-600);
  --surface-success-hover: var(--brand-600);

  --border-primary: var(--text-primary);
  --border-secondary: var(--text-secondary);
  --border-separator: var(--neutral-600);
  --border-disabled: var(--text-disabled);
}