/* =============================================
   variables.css – Design tokens & CSS custom properties
   Moderate Roller Solution
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {

  /* ──────────────────────────────────────────
     COLOR PALETTE
  ────────────────────────────────────────── */

  /* Brand Colors */
  --color-primary:         #D71920;
  --color-primary-dark:    #A8121A;
  --color-primary-light:   #E8454B;
  --color-primary-subtle:  rgba(215, 25, 32, 0.08);
  --color-primary-glow:    rgba(215, 25, 32, 0.25);

  /* Neutral Colors */
  --color-black:           #111111;
  --color-dark-gray:       #333333;
  --color-mid-gray:        #666666;
  --color-border-gray:     #CCCCCC;
  --color-light-gray:      #F5F5F5;
  --color-white:           #FFFFFF;

  /* Semantic Aliases */
  --color-bg:              var(--color-white);
  --color-bg-alt:          var(--color-light-gray);
  --color-bg-dark:         var(--color-black);
  --color-text:            var(--color-dark-gray);
  --color-text-muted:      var(--color-mid-gray);
  --color-text-inverse:    var(--color-white);
  --color-heading:         var(--color-black);
  --color-border:          var(--color-border-gray);
  --color-accent:          var(--color-primary);

  /* Surface Colors */
  --color-surface:         var(--color-white);
  --color-surface-alt:     var(--color-light-gray);
  --color-surface-dark:    #1A1A1A;
  --color-overlay:         rgba(17, 17, 17, 0.55);


  /* ──────────────────────────────────────────
     TYPOGRAPHY
  ────────────────────────────────────────── */

  --font-heading:   'Montserrat', sans-serif;
  --font-body:      'Poppins', sans-serif;

  /* Font Sizes – fluid clamp scale */
  --fs-xs:    clamp(0.694rem,  0.65rem  + 0.22vw, 0.8rem);
  --fs-sm:    clamp(0.833rem,  0.8rem   + 0.2vw,  0.9rem);
  --fs-base:  clamp(1rem,      0.95rem  + 0.25vw, 1.05rem);
  --fs-md:    clamp(1.1rem,    1rem     + 0.5vw,  1.25rem);
  --fs-lg:    clamp(1.25rem,   1.1rem   + 0.75vw, 1.5rem);
  --fs-xl:    clamp(1.5rem,    1.25rem  + 1.25vw, 2rem);
  --fs-2xl:   clamp(1.875rem,  1.5rem   + 1.875vw, 2.625rem);
  --fs-3xl:   clamp(2.25rem,   1.75rem  + 2.5vw,  3.5rem);
  --fs-4xl:   clamp(2.75rem,   2rem     + 3.75vw, 4.5rem);

  /* Font Weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Line Heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-base:    1.6;
  --lh-relaxed: 1.75;

  /* Letter Spacing */
  --ls-tight:   -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.1em;
  --ls-widest:  0.2em;


  /* ──────────────────────────────────────────
     SPACING
  ────────────────────────────────────────── */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */


  /* ──────────────────────────────────────────
     LAYOUT
  ────────────────────────────────────────── */

  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-max:  1400px;
  --container-pad:  clamp(1rem, 5vw, 2.5rem);

  /* Grid */
  --grid-cols:   12;
  --grid-gap:    clamp(1rem, 2vw, 1.5rem);


  /* ──────────────────────────────────────────
     BORDERS & RADII
  ────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  --border-width:  1px;
  --border-width-2: 2px;


  /* ──────────────────────────────────────────
     SHADOWS
  ────────────────────────────────────────── */

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.10);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.16);
  --shadow-xl:  0 16px 64px rgba(0,0,0,0.20);
  --shadow-red: 0 8px 32px var(--color-primary-glow);


  /* ──────────────────────────────────────────
     TRANSITIONS & ANIMATIONS
  ────────────────────────────────────────── */

  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-slowest: 900ms;

  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --transition-base:   all var(--duration-base) var(--ease-default);
  --transition-fast:   all var(--duration-fast) var(--ease-default);
  --transition-slow:   all var(--duration-slow) var(--ease-default);


  /* ──────────────────────────────────────────
     Z-INDEX SCALE
  ────────────────────────────────────────── */

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

  /* ──────────────────────────────────────────
     NAVBAR
  ────────────────────────────────────────── */
  --navbar-height:       72px;
  --navbar-height-sm:    60px;
  --navbar-bg:           var(--color-white);
  --navbar-bg-scrolled:  var(--color-white);
  --navbar-border:       rgba(0,0,0,0.08);

}