/* ==========================================================================
   B2B RENT CAR - DESIGN TOKENS & VARIABLES
   ========================================================================== */

:root {
  /* Color Palette - Dark Aesthetic (Graphite / Automotive) */
  --bg-primary: #101214;          /* Graphite Black */
  --bg-secondary: #16191D;        /* Deep Graphite */
  --bg-tertiary: #1D2126;         /* Elevated Dark Surface */
  --bg-card: #181C20;             /* Dark Card Surface */
  --bg-card-hover: #22272E;       /* Dark Card Hover Surface */

  /* Text Colors - On Dark */
  --text-primary: #F7F8F9;        /* White Smoke */
  --text-secondary: #AEB4BC;      /* Steel Gray */
  --text-muted: #7E8691;          /* Muted Gray */
  --text-inverse: #101214;        /* Dark text on light elements */

  /* Color Palette - Light Aesthetic (Intercalated Sections) */
  --bg-light-section: #F4F6F8;    /* Ice Gray / Premium Light Background */
  --bg-light-surface: #FFFFFF;    /* Pure White Surface */
  --bg-light-card: #FFFFFF;       /* Pure White Card */
  --bg-light-card-hover: #FAFBFC; /* Light Card Hover */

  /* Text Colors - On Light */
  --text-on-light-primary: #121519;   /* Deep Carbon */
  --text-on-light-secondary: #525B67; /* Refined Slate */
  --text-on-light-muted: #828C98;     /* Soft Slate */

  /* Borders for Light Sections */
  --border-on-light-subtle: rgba(18, 21, 25, 0.08);
  --border-on-light-medium: rgba(18, 21, 25, 0.15);

  /* Accent & Interactive Colors */
  --accent-primary: #2F80ED;      /* Electric Blue */
  --accent-hover: #1F67C7;        /* Deep Blue */
  --accent-light: rgba(47, 128, 237, 0.12);
  --accent-glow: 0 0 25px rgba(47, 128, 237, 0.35);

  /* Metallic Silver Accents */
  --silver-bright: #E7E9EC;       /* Soft Silver */
  --silver-metal: #BFC5CC;        /* Brushed Silver */
  --silver-dark: #6C7580;         /* Dark Metallic */

  /* WhatsApp Brand Color */
  --whatsapp-color: #25D366;
  --whatsapp-hover: #1EBE5B;
  --whatsapp-glow: 0 0 20px rgba(37, 211, 102, 0.35);

  /* Borders & Dividers on Dark */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-focus: rgba(47, 128, 237, 0.5);

  /* Glassmorphism */
  --glass-bg: rgba(16, 18, 20, 0.92);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(14px);

  /* Typography */
  --font-main: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Fluid Font Sizes (clamp) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);
  --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --text-5xl: clamp(2.75rem, 2.3rem + 2.25vw, 3.875rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;

  /* Layout Containers */
  --container-max: 1240px;
  --container-padding: clamp(1.25rem, 3.5vw, 2.5rem);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-light-card: 0 8px 30px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.45s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-indices */
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-floating: 300;
}