/* ============================================================
   VARIABLES
   Global design tokens for the entire project.
   All colors, spacing, typography, radius, shadow,
   transition and z-index values live here.
   ============================================================ */

:root {

  /* --------------------------------------------------------
     COLORS
     -------------------------------------------------------- */

  --color-primary:        #E5342A;
  --color-primary-dark:   #C0281F;
  --color-primary-light:  #F5A09A;

  --color-secondary:      #1A1A1A;
  --color-secondary-dark: #0D0D0D;

  --color-accent:         #E5342A;

  --color-text:           #1A1A1A;
  --color-heading:        #0D0D0D;
  --color-muted:          #999999;
  --color-subtle:         #545454;

  --color-border:         #E5E7EB;
  --color-divider:        #DFDFDF;

  --color-background:     #FFFFFF;
  --color-surface:        #F9F9F9;
  --color-surface-mid:    #BBBBBB;

  --color-white:          #ffffff;
  --color-black:          #000000;
  --color-dark:           #111111;
  --color-dark-elevated:  #393737;

  /* --------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------- */

  --font-primary:   'Poppins', sans-serif;
  --font-secondary: 'Montserrat', sans-serif;

  --font-size-2xs:  0.6875rem; /* 11px */
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl-sm: 1.375rem; /* 22px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-xl-lg: 1.75rem;  /* 28px */
  --font-size-2xl:  2rem;      /* 32px */
  --font-size-3xl:  2.5rem;    /* 40px */
  --font-size-4xl:  3rem;      /* 48px */
  --font-size-5xl:  3.4375rem; /* 55px */

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.75;

  /* --------------------------------------------------------
     SPACING
     -------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-45: 180px;

  --space-neg-1:  -4px;
  --space-neg-2:  -8px;
  --space-neg-3:  -12px;
  --space-neg-4:  -16px;
  --space-neg-6:  -24px;
  --space-neg-8:  -32px;
  --space-neg-10: -40px;
  --space-neg-12: -48px;
  --space-neg-16: -64px;
  --space-neg-20: -80px;

  /* --------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------- */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-md-lg: 10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  /* --------------------------------------------------------
     SHADOWS
     -------------------------------------------------------- */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* --------------------------------------------------------
     TRANSITIONS
     -------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;

  /* --------------------------------------------------------
     Z-INDEX
     -------------------------------------------------------- */

  --z-below:   -1;
  --z-base:     0;
  --z-above:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* --------------------------------------------------------
     LAYOUT
     -------------------------------------------------------- */

  --header-height: 116px;

}