/* =========================================================
   CORE-UNIVERSAL (core.css)
   Xpress Vending – Brand Foundation
   Dark, elegant, professional artistic theme
   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;
   }
   
   html {
     color-scheme: dark;
   }
   
   body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
   }
   
   
   /* =========================================================
      2. ROOT DESIGN TOKENS
      ========================================================= */
   
   :root {
   
     /* =========================
        BRAND COLORS (Primary)
        Palette mapped from provided source
        ========================= */
   
     --color-primary-dark: #022765;       /* Deep Navy Blue */
     --color-primary-base: #2E5990;       /* Strong Blue */
     --color-primary-muted: #576E97;      /* Muted Blue */
     --color-primary-light: #648EB6;      /* Medium Blue */
     --color-primary-soft: #799EC1;       /* Light Blue */
   
     /* =========================
        SECONDARY SUPPORT COLORS
        ========================= */
   
     --color-secondary-steel: #2C476E;    /* Dark Steel Blue */
     --color-secondary-pale: #97B0C9;     /* Pale Blue */
     --color-secondary-silver: #B9C5D0;   /* Light Silver */
     --color-secondary-bright: #DCE2E6;   /* Bright Silver / Near White */
   
     /* =========================
        NEUTRALS
        ========================= */
   
     --color-black: #000000;              /* Pure Black */
     --color-white: #DCE2E6;              /* Soft white substitute for dark UI */
     --color-gray-900: #585C69;           /* Dark Gray */
     --color-gray-700: #8F96A2;           /* Cool Gray */
     --color-gray-100: #B9C5D0;           /* Light Silver */
   
     /* =========================
        SEMANTIC COLOR SYSTEM
        (Use these in components)
        ========================= */
   
     --bg-primary: #000000;
     --bg-secondary: #022765;
     --bg-tertiary: #2C476E;
     --bg-elevated: #2E5990;
     --bg-soft: #576E97;
     --bg-accent: #648EB6;
     --bg-highlight: #799EC1;
   
     --text-primary: #DCE2E6;
     --text-secondary: #B9C5D0;
     --text-muted: #8F96A2;
     --text-soft: #97B0C9;
     --text-inverse: #000000;
     --text-accent: #799EC1;
     --text-bright: #DCE2E6;
   
     --border-default: rgba(151, 176, 201, 0.24);
     --border-strong: rgba(185, 197, 208, 0.4);
     --border-accent: rgba(100, 142, 182, 0.45);
   
     --link-color: #97B0C9;
     --link-hover: #DCE2E6;
     --link-active: #799EC1;
   
     /* =========================
        SURFACE / ATMOSPHERE TOKENS
        ========================= */
   
     --surface-1: linear-gradient(180deg, #022765 0%, #000000 100%);
     --surface-2: linear-gradient(145deg, rgba(46, 89, 144, 0.22) 0%, rgba(44, 71, 110, 0.72) 100%);
     --surface-3: linear-gradient(135deg, rgba(220, 226, 230, 0.08) 0%, rgba(100, 142, 182, 0.12) 45%, rgba(2, 39, 101, 0.28) 100%);
     --surface-radial: radial-gradient(circle at top center, rgba(151, 176, 201, 0.18) 0%, rgba(100, 142, 182, 0.12) 25%, rgba(2, 39, 101, 0.08) 50%, rgba(0, 0, 0, 0) 100%);
   
     /* =========================
        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.5;
     --letter-spacing-tight: -0.02em;
     --letter-spacing-normal: 0;
     --letter-spacing-wide: 0.04em;
   
     /* =========================
        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 4px 12px rgba(0, 0, 0, 0.24);
     --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.34);
     --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.46);
   
     --glow-soft: 0 0 0 1px rgba(185, 197, 208, 0.08), 0 0 24px rgba(121, 158, 193, 0.08);
     --glow-accent: 0 0 0 1px rgba(151, 176, 201, 0.12), 0 0 32px rgba(100, 142, 182, 0.18);
   
     /* =========================
        TRANSITIONS
        ========================= */
   
     --transition-fast: 0.15s ease;
     --transition-normal: 0.3s ease;
     --transition-slow: 0.45s ease;
   }
   
   
   /* =========================================================
      3. BASE GLOBAL STYLES
      ========================================================= */
   
   body {
     font-family: var(--font-primary);
     font-size: var(--font-size-md);
     line-height: var(--line-height-base);
     letter-spacing: var(--letter-spacing-normal);
     color: var(--text-primary);
     background-color: var(--bg-primary);
     background-image: var(--surface-radial), var(--surface-1);
   }
   
   
   /* =========================================================
      4. GLOBAL ELEMENT STYLING
      (Universal behaviors only)
      ========================================================= */
   
   ::selection {
     background: rgba(121, 158, 193, 0.28);
     color: var(--text-bright);
   }
   
   a {
     color: var(--link-color);
     text-decoration: none;
     transition:
       color var(--transition-fast),
       opacity var(--transition-fast);
   }
   
   a:hover {
     color: var(--link-hover);
   }
   
   a:active {
     color: var(--link-active);
   }
   
   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   textarea:focus-visible,
   select:focus-visible {
     outline: 2px solid rgba(220, 226, 230, 0.72);
     outline-offset: 2px;
   }
   
   img {
     max-width: 100%;
     display: block;
   }
   
   button {
     font-family: inherit;
     cursor: pointer;
     border: none;
     background: none;
     color: inherit;
     transition:
       transform var(--transition-fast),
       opacity var(--transition-fast),
       box-shadow var(--transition-fast);
   }
   
   button:hover {
     opacity: 0.96;
   }
   
   button:active {
     transform: translateY(1px);
   }
   
   hr {
     border: 0;
     border-top: 1px solid var(--border-default);
   }
   
   input,
   textarea,
   select {
     font: inherit;
     color: var(--text-primary);
     background: rgba(44, 71, 110, 0.38);
     border: 1px solid var(--border-default);
     border-radius: var(--radius-md);
   }
   
   input::placeholder,
   textarea::placeholder {
     color: var(--text-muted);
   }
   
   
   /* =========================================================
      5. UTILITY CLASSES (Universal, Safe)
      ========================================================= */
   
   /* Background Utilities */
   .bg-primary {
     background-color: var(--bg-primary);
     color: var(--text-primary);
   }
   
   .bg-secondary {
     background-color: var(--bg-secondary);
     color: var(--text-primary);
   }
   
   .bg-tertiary {
     background-color: var(--bg-tertiary);
     color: var(--text-primary);
   }
   
   .bg-accent {
     background-color: var(--bg-accent);
     color: var(--text-inverse);
   }
   
   .bg-light {
     background-color: var(--bg-soft);
     color: var(--text-primary);
   }
   
   .bg-elevated {
     background: var(--surface-2);
     color: var(--text-primary);
     border: 1px solid var(--border-default);
     box-shadow: var(--shadow-md), var(--glow-soft);
   }
   
   /* Text Utilities */
   .text-center {
     text-align: center;
   }
   
   .text-inverse {
     color: var(--text-inverse);
   }
   
   .text-primary {
     color: var(--text-primary);
   }
   
   .text-secondary {
     color: var(--text-secondary);
   }
   
   .text-muted {
     color: var(--text-muted);
   }
   
   .text-soft {
     color: var(--text-soft);
   }
   
   .text-accent {
     color: var(--text-accent);
   }
   
   /* 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); }
   
   /* Border Utilities */
   .border-default { border: 1px solid var(--border-default); }
   .border-strong { border: 1px solid var(--border-strong); }
   
   /* Glow Utilities */
   .glow-soft { box-shadow: var(--glow-soft); }
   .glow-accent { box-shadow: var(--glow-accent); }