/**
 * ====================================================================
 * AXLE LANE - DESIGN SYSTEM & CSS VARIABLES
 * File: css/variables.css
 * ====================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
   /* ==================================================================
     1. COLOR PALETTE
     ================================================================== */

   --secondary-color: #AE8352;
   --primary-color: #17324D;
   --background-color: #F6F4EF;
   --body-text: #575A5F;
   --dark-text: #081521;
   --section-bg: #081521;
   --body-text-dark-bg: #F4F1EA;
   --color-white: #FFFFFF;
   --color-black: #000000;
   --border-color: #D4D1CA;
   --button-text-light: #F6F4EF;
   --button-text-dark: #081521;

   /* Status & Functional */
   --color-success: #2E8B57;
   --color-success-bg: rgba(46, 139, 87, 0.12);
   --color-star: #F5A623;
   --color-border-light: #D4D1CA;
   --color-border-subtle: #EBE6DC;

   /* ==================================================================
     2. TYPOGRAPHY SYSTEM
     ================================================================== */
   --font-primary: "Montserrat", sans-serif;
   --font-heading: "Manrope", sans-serif;
   --font-h1: 64px;
   --font-h2: 40px;
   --font-h3: 24px;
   --font-h4: 19px;
   --font-h5: 13px;
   --font-h6: 12px;
   --font-body-text: 16px;

   /* ==================================================================
     3. SPACING & SIZING
     ================================================================== */
   --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;

   --container-max-w: 1660px;
   --container-narrow-w: 1260px;
   --container-px: 20px;

   /* ==================================================================
     4. TRANSITIONS & ANIMATIONS
     ================================================================== */
   --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
   --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}