/* ============================================================
   FLEETPRO MOBILITY & HAULAGE LIMITED
   CSS Design Tokens & Variables
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR SYSTEM
     ---------------------------------------------------------- */

  /* Primary — Deep Navy */
  --color-navy-900: #0A1628;
  --color-navy-800: #0D1E38;
  --color-navy-700: #112448;
  --color-navy-600: #162D5A;
  --color-navy-500: #1B3570;

  /* Primary — Corporate Blue */
  --color-blue-700: #1A3F7A;
  --color-blue-600: #1E4D99;
  --color-blue-500: #2258B5;
  --color-blue-400: #2D6FD4;
  --color-blue-300: #4A89E8;
  --color-blue-200: #7AAEF2;
  --color-blue-100: #C2D9F8;
  --color-blue-50:  #EBF3FD;

  /* Neutrals — White & Light Greys */
  --color-white:       #FFFFFF;
  --color-grey-50:     #F7F8FA;
  --color-grey-100:    #F0F2F5;
  --color-grey-150:    #E8EBF0;
  --color-grey-200:    #DDE1E8;
  --color-grey-300:    #C4CAD4;
  --color-grey-400:    #9AA3B0;
  --color-grey-500:    #6B7585;
  --color-grey-600:    #4A5568;
  --color-grey-700:    #374151;
  --color-grey-800:    #1F2937;
  --color-grey-900:    #111827;

  /* Accent — Blue-Grey */
  --color-bluegrey-50:  #EEF1F6;
  --color-bluegrey-100: #E2E7EF;
  --color-bluegrey-200: #C9D2E0;
  --color-bluegrey-300: #A8B5C8;
  --color-bluegrey-400: #7E93AE;
  --color-bluegrey-500: #5A7494;

  /* Accent — Silver/Metallic */
  --color-silver-light: #E8ECF1;
  --color-silver:       #C8CDD6;
  --color-silver-dark:  #9BA3B0;

  /* Semantic Colors */
  --color-success: #1A7A4A;
  --color-warning: #B45309;
  --color-error:   #B91C1C;

  /* ----------------------------------------------------------
     SECTION BACKGROUNDS
     ---------------------------------------------------------- */

  --bg-hero:          #F5F7FA;
  --bg-trust:         #EBF0F7;
  --bg-services:      #FFFFFF;
  --bg-about:         #F7F8FA;
  --bg-founder:       #FFFFFF;
  --bg-airport:       #0A1628;
  --bg-fleet:         #F0F3F8;
  --bg-testimonials:  #FFFFFF;
  --bg-faq:           #F7F8FA;
  --bg-cta:           #0D1E38;
  --bg-contact:       #F5F7FA;
  --bg-footer:        #0A1628;

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

  --font-primary:   'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-secondary: 'Inter', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   1.875rem;
  --fs-3xl:   2.25rem;
  --fs-4xl:   2.75rem;
  --fs-5xl:   3.25rem;
  --fs-6xl:   3.75rem;
  --fs-7xl:   4.5rem;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  --ls-tight:  -0.03em;
  --ls-snug:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-widest:  0.12em;

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

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-28:  7rem;
  --space-32:  8rem;
  --space-40:  10rem;
  --space-48:  12rem;

  --section-padding-y:      var(--space-24);
  --section-padding-y-lg:   var(--space-32);
  --section-padding-y-sm:   var(--space-16);

  /* ----------------------------------------------------------
     LAYOUT & CONTAINERS
     ---------------------------------------------------------- */

  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow: 800px;
  --container-text:   680px;

  --container-padding-x:    var(--space-8);
  --container-padding-x-sm: var(--space-6);
  --container-padding-x-xs: var(--space-4);

  /* ----------------------------------------------------------
     BORDERS
     ---------------------------------------------------------- */

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

  --border-width:      1px;
  --border-width-md:   1.5px;
  --border-width-lg:   2px;

  --border-color:         var(--color-grey-200);
  --border-color-light:   var(--color-grey-150);
  --border-color-dark:    var(--color-grey-300);
  --border-color-navy:    rgba(255, 255, 255, 0.12);

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

  --shadow-xs:  0 1px 2px rgba(10, 22, 40, 0.06);
  --shadow-sm:  0 2px 6px rgba(10, 22, 40, 0.08);
  --shadow-md:  0 4px 16px rgba(10, 22, 40, 0.10);
  --shadow-lg:  0 8px 30px rgba(10, 22, 40, 0.12);
  --shadow-xl:  0 16px 48px rgba(10, 22, 40, 0.14);
  --shadow-2xl: 0 24px 64px rgba(10, 22, 40, 0.18);

  --shadow-blue-sm: 0 4px 16px rgba(34, 88, 181, 0.18);
  --shadow-blue-md: 0 8px 28px rgba(34, 88, 181, 0.22);

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

  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-smooth:  350ms ease;
  --transition-slow:    500ms ease;
  --transition-slower:  700ms ease;

  /* ----------------------------------------------------------
     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;

  /* ----------------------------------------------------------
     NAVIGATION
     ---------------------------------------------------------- */

  --nav-height:         76px;
  --nav-height-mobile:  64px;

}