/* =========================================================
   CORE-UNIVERSAL (core-u.css)
   Xpress Vending – Brand Foundation
   This file contains ONLY design tokens and universal rules.
   No layout or page-specific styling.
   ========================================================= */


/* =========================================================
   1. CSS RESET (Lightweight, Safe Reset)
   ========================================================= */

   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html, body {
     margin: 0;
     padding: 0;
   }
   
   body {
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
   
   
   /* =========================================================
      2. ROOT DESIGN TOKENS
      ========================================================= */
   
   :root {
   
     /* =========================
        BRAND COLORS (Primary)
        ========================= */
   
     --color-primary-dark: #2E3A46;      /* Deep Charcoal Blue */
     --color-primary-teal: #1CA3C7;      /* Teal Blue */
     --color-primary-cyan: #00AEEF;      /* Bright Cyan */
   
     /* =========================
        SECONDARY SUPPORT COLORS
        ========================= */
   
     --color-secondary-slate: #4F6F8A;
     --color-secondary-light: #A9C3D6;
     --color-secondary-accent: #5B5BCF;
   
     /* =========================
        NEUTRALS
        ========================= */
   
     --color-black: #000000;
     --color-white: #FFFFFF;
     --color-gray-900: #333333;
     --color-gray-100: #F2F2F2;
   
     /* =========================
        SEMANTIC COLOR SYSTEM
        (Use these in components)
        ========================= */
   
     --bg-primary: var(--color-primary-dark);
     --bg-secondary: var(--color-gray-100);
     --bg-accent: var(--color-primary-teal);
   
     --text-primary: var(--color-primary-dark);
     --text-inverse: var(--color-white);
     --text-muted: var(--color-gray-900);
   
     --border-default: var(--color-secondary-light);
   
     --link-color: var(--color-primary-cyan);
     --link-hover: var(--color-primary-teal);
   
     /* =========================
        TYPOGRAPHY
        ========================= */
   
     --font-primary: 'Inter', 'Helvetica Neue', Arial, sans-serif;
   
     --font-size-xs: 0.75rem;
     --font-size-sm: 0.875rem;
     --font-size-md: 1rem;
     --font-size-lg: 1.25rem;
     --font-size-xl: 1.75rem;
     --font-size-xxl: 2.5rem;
   
     --line-height-base: 1.1;
   
     /* =========================
        SPACING SYSTEM (8px scale)
        ========================= */
   
     --space-1: 0.5rem;   /* 8px */
     --space-2: 1rem;     /* 16px */
     --space-3: 1.5rem;   /* 24px */
     --space-4: 2rem;     /* 32px */
     --space-5: 3rem;     /* 48px */
     --space-6: 4rem;     /* 64px */
   
     /* =========================
        BORDER RADIUS
        ========================= */
   
     --radius-sm: 6px;
     --radius-md: 12px;
     --radius-lg: 20px;
     --radius-xl: 40px;
   
     /* =========================
        SHADOWS
        ========================= */
   
     --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
     --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.12);
     --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.18);
   
     /* =========================
        TRANSITIONS
        ========================= */
   
     --transition-fast: 0.15s ease;
     --transition-normal: 0.3s ease;
   }
   
   
   /* =========================================================
      3. BASE GLOBAL STYLES
      ========================================================= */
   
   body {
     font-family: var(--font-primary);
     font-size: var(--font-size-md);
     line-height: var(--line-height-base);
     color: var(--text-primary);
     background-color: var(--color-white);
   }
   
   
   /* =========================================================
      4. GLOBAL ELEMENT STYLING
      (Universal behaviors only)
      ========================================================= */
   
   a {
     color: var(--link-color);
     text-decoration: none;
     transition: color var(--transition-fast);
   }
   
   a:hover {
     color: var(--link-hover);
   }
   
   img {
     max-width: 100%;
     display: block;
   }
   
   button {
     font-family: inherit;
     cursor: pointer;
     border: none;
     background: none;
   }
   
   
   /* =========================================================
      5. UTILITY CLASSES (Universal, Safe)
      ========================================================= */
   
   /* Background Utilities */
   .bg-primary {
     background-color: var(--bg-primary);
     color: var(--text-inverse);
   }
   
   .bg-accent {
     background-color: var(--bg-accent);
     color: var(--text-inverse);
   }
   
   .bg-light {
     background-color: var(--bg-secondary);
   }
   
   /* Text Utilities */
   .text-center {
     text-align: center;
   }
   
   .text-inverse {
     color: var(--text-inverse);
   }
   
   .text-muted {
     color: var(--text-muted);
   }
   
   /* Spacing Utilities */
   .mt-1 { margin-top: var(--space-1); }
   .mt-2 { margin-top: var(--space-2); }
   .mt-3 { margin-top: var(--space-3); }
   
   .mb-1 { margin-bottom: var(--space-1); }
   .mb-2 { margin-bottom: var(--space-2); }
   .mb-3 { margin-bottom: var(--space-3); }
   
   /* Rounded Utilities */
   .rounded-sm { border-radius: var(--radius-sm); }
   .rounded-md { border-radius: var(--radius-md); }
   .rounded-lg { border-radius: var(--radius-lg); }
   
   /* Shadow Utilities */
   .shadow-sm { box-shadow: var(--shadow-sm); }
   .shadow-md { box-shadow: var(--shadow-md); }
   .shadow-lg { box-shadow: var(--shadow-lg); }