/* === variables.css === */
/* Design tokens extracted from Figma homepage design */

:root {
  /* -----------------------------------------------
     COLOURS
     ----------------------------------------------- */
  --color-primary:        #ca161e;
  --color-black:          #000000;
  --color-white:          #ffffff;
  --color-text:           #000000;
  --color-text-dark:      #202020;
  --color-gray-light:     #f7f7f7;
  --color-gray-mid:       #efefef;
  --color-navy:           #2d2c4b;
  --color-hero-text:      #373737;
  --color-hero-bg:        #e8e8e8;
  --color-gray:           #808080;
  --color-border-light:   #b8b8b8;

  /* -----------------------------------------------
     FONT FAMILIES
     ----------------------------------------------- */
  --font-heading:   "abacaxi-latin-variable", "Abacaxi Latin VF", serif;
  --font-nav:       "pacaembu", "Pacaembu", sans-serif;
  --font-body:      "abacaxi-latin-variable", "Abacaxi Latin VF", serif;
  --font-btn-alt:   "Sarvatrik Latin VF", sans-serif;

  /* -----------------------------------------------
     FONT SIZES
     ----------------------------------------------- */
  --text-hero:      clamp(2.75rem, 4vw + 1rem, 5rem);       /* ~80px */
  --text-display:   clamp(2.25rem, 3vw + 0.5rem, 3.875rem); /* ~62px */
  --text-h2:        clamp(2rem, 2.5vw + 0.5rem, 3.375rem);  /* ~54px */
  --text-card-title: 1.625rem;                               /* 26px */
  --text-quote:     1.5rem;                                  /* 24px */
  --text-body-lg:   1.125rem;                                /* 18px */
  --text-body:      1rem;                                    /* 16px */
  --text-nav:       1rem;                                    /* 16px */
  --text-btn:       1.125rem;                                /* 18px */

  /* -----------------------------------------------
     LINE HEIGHTS
     ----------------------------------------------- */
  --leading-hero:       1;
  --leading-display:    1.16;
  --leading-h2:         1.15;
  --leading-quote:      1.83;
  --leading-body-lg:    1.556;
  --leading-body:       1.625;
  --leading-footer:     1.78;

  /* -----------------------------------------------
     LETTER SPACING
     ----------------------------------------------- */
  --tracking-hero:      -0.06em;
  --tracking-display:   -0.03em;
  --tracking-h2:        -0.03em;
  --tracking-card-title: -0.03em;
  --tracking-body:      -0.03em;

  /* -----------------------------------------------
     SPACING
     ----------------------------------------------- */
  --spacing-xs:     0.5rem;    /*  8px */
  --spacing-sm:     0.875rem;  /* 14px */
  --spacing-md:     1rem;      /* 16px */
  --spacing-lg:     1.5rem;    /* 24px */
  --spacing-xl:     2.125rem;  /* 34px */
  --spacing-2xl:    2.375rem;  /* 38px */
  --spacing-3xl:    3.5rem;    /* 56px */
  --spacing-4xl:    3.75rem;   /* 60px */
  --spacing-5xl:    3.9375rem; /* 63px */

  /* -----------------------------------------------
     CONTAINER
     ----------------------------------------------- */
  --container-max:  75rem;     /* 1200px */
  --container-padding: 1.25rem;

  /* -----------------------------------------------
     BORDERS & RADII
     ----------------------------------------------- */
  --radius-sm:      0.5rem;    /*  8px */
  --radius-md:      0.75rem;   /* 12px */
  --radius-full:    9999px;
  --border-divider: 1px solid var(--color-black);
  --border-accent:  4px solid var(--color-black);

  /* -----------------------------------------------
     SHADOWS
     ----------------------------------------------- */
  --shadow-card:    0 2px 8px rgba(0, 0, 0, 0.08);

  /* -----------------------------------------------
     TRANSITIONS
     ----------------------------------------------- */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;

  /* -----------------------------------------------
     GRADIENTS
     ----------------------------------------------- */
  --gradient-projects:  linear-gradient(182deg, rgba(239,239,239,1) 22%, rgba(255,255,255,1) 100%);
  --gradient-fade:      linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

  /* -----------------------------------------------
     Z-INDEX SCALE
     ----------------------------------------------- */
  --z-dropdown:     100;
  --z-sticky:       200;
  --z-overlay:      300;
  --z-modal:        400;
}