/**
 * CSS Variables & Theme Colors
 */

:root,
body.red {
  /* Primary Colors */
  --text-body-rgb: 177, 22, 22;
  --text-body: #B11616;
  --theme-primary: #C1222B;
  --theme-primary-dark: #8B1820;

  /* To-Top Button Colors */
  --totop-primary-color: #B11616;
  --totop-primary-dark: #8b1010;
  --totop-primary-light: #dc2626;

  /* Surface Colors */
  --surface-surface: #FFF;
  --surface-surface-dim: #F5F3F7;
  --surface-on-surface: #000;
  --surface-on-surface-variant: #4B4545;
  --surface-outline: #E4E2E6;

  /* Typography */
  --font-family: Dubai, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Font Sizes */
  --font-size-h3: 32px;
  --font-size-h4: 28px;
  --font-size-h5: 24px;
  --font-size-h6: 20px;
  --font-size-body: 16px;
  --font-size-caption: 14px;

  /* Line Heights */
  --line-height-h3: 40px;
  --line-height-h4: 36px;
  --line-height-h5: 32px;
  --line-height-h6: 28px;
  --line-height-body: 24px;
  --line-height-caption: 20px;

  /* Spacing */
  --padding-section-lg: 64px;
  --padding-section-md: 48px;
  --padding-padding-xl: 24px;
  --padding-padding-lg: 16px;
  --padding-padding-md: 12px;
  --padding-padding-sm: 8px;

  --gap-gap-xxl: 32px;
  --gap-gap-lg: 16px;
  --gap-gap-md: 12px;
  --gap-gap-sm: 8px;
  --gap-gap-xs: 4px;

  /* Border Radius */
  --radius-md: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --opacity-on-surface-opacity12: rgba(0, 0, 0, 0.12);

  /* Other */
  --theme-border: #DDD;
  --theme-text-secondary: #333333;
  --bs-body-bg: #ffffff;
}

body.blue {
  --text-body-rgb: 2, 96, 151;
  --text-body: #026097;
  --theme-primary: #026097;
  --theme-primary-dark: #014a74;

  --totop-primary-color: #026097;
  --totop-primary-dark: #014a74;
  --totop-primary-light: #0284c7;
}