/* ============================================
   CSS VARIABLES - LUXURY HOTEL CHECK-IN SYSTEM
   ============================================ */

:root {
    --vh: 1;
    --scale: 1;
    /* Spacing Variables */
    --px-1: calc(1px * var(--scale));
    --px-2: calc(2px * var(--scale));
    --px-4: calc(4px * var(--scale));
    --px-6: calc(6px * var(--scale));
    --px-8: calc(8px * var(--scale));
    --px-10: calc(10px * var(--scale));
    --px-12: calc(12px * var(--scale));
    --px-14: calc(14px * var(--scale));
    --px-16: calc(16px * var(--scale));
    --px-18: calc(18px * var(--scale));
    --px-20: calc(20px * var(--scale));
    --px-24: calc(24px * var(--scale));
    --px-28: calc(28px * var(--scale));
    --px-32: calc(32px * var(--scale));
    --px-36: calc(36px * var(--scale));
    --px-40: calc(40px * var(--scale));
    --px-44: calc(44px * var(--scale));
    --px-48: calc(48px * var(--scale));
    --px-52: calc(52px * var(--scale));
    --px-56: calc(56px * var(--scale));
    --px-60: calc(60px * var(--scale));
    --px-64: calc(64px * var(--scale));
    --px-68: calc(68px * var(--scale));
    --px-72: calc(72px * var(--scale));
    --px-76: calc(76px * var(--scale));
    --px-80: calc(80px * var(--scale));
    --px-88: calc(88px * var(--scale));
    --px-92: calc(92px * var(--scale));
    --px-96: calc(96px * var(--scale));
    --px-100: calc(100px * var(--scale));
    --px-104: calc(104px * var(--scale));
    --px-108: calc(108px * var(--scale));
    --px-112: calc(112px * var(--scale));
    --px-116: calc(116px * var(--scale));
    --px-120: calc(120px * var(--scale));
    --px-140: calc(140px * var(--scale));
    --px-160: calc(160px * var(--scale));
    --px-180: calc(180px * var(--scale));
    --px-200: calc(200px * var(--scale));
    --px-240: calc(240px * var(--scale));
    --px-280: calc(280px * var(--scale));
    --px-300: calc(300px * var(--scale));
    --px-320: calc(320px * var(--scale));
    --px-400: calc(400px * var(--scale));
    --px-440: calc(440px * var(--scale));
    --px-460: calc(460px * var(--scale));
    --px-500: calc(500px * var(--scale));
    --px-800: calc(800px * var(--scale));
    /* Spacing Scale (for Management) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    /* Typography */
    --s-8: calc(8px * var(--scale)) / calc(11px * var(--scale)) "Poppins", sans-serif;
    --s-10: calc(10px * var(--scale)) / calc(13px * var(--scale)) "Poppins", sans-serif;
    --s-11: calc(11px * var(--scale)) / calc(14px * var(--scale)) "Poppins", sans-serif;
    --s-12: calc(12px * var(--scale)) / calc(15px * var(--scale)) "Poppins", sans-serif;
    --s-13: calc(13px * var(--scale)) / calc(16px * var(--scale)) "Poppins", sans-serif;
    --s-14: calc(14px * var(--scale)) / calc(18px * var(--scale)) "Poppins", sans-serif;
    --s-15: calc(15px * var(--scale)) / calc(19px * var(--scale)) "Poppins", sans-serif;
    --s-16: calc(16px * var(--scale)) / calc(19px * var(--scale)) "Poppins", sans-serif;
    --s-18: calc(18px * var(--scale)) / calc(22px * var(--scale)) "Poppins", sans-serif;
    --s-20: calc(20px * var(--scale)) / calc(24px * var(--scale)) "Poppins", sans-serif;
    --s-22: calc(22px * var(--scale)) / calc(27px * var(--scale)) "Poppins", sans-serif;
    --s-24: calc(24px * var(--scale)) / calc(30px * var(--scale)) "Poppins", sans-serif;
    --s-26: calc(26px * var(--scale)) / calc(32px * var(--scale)) "Poppins", sans-serif;
    --s-28: calc(28px * var(--scale)) / calc(34px * var(--scale)) "Poppins", sans-serif;
    --s-30: calc(30px * var(--scale)) / calc(37px * var(--scale)) "Poppins", sans-serif;
    --s-32: calc(32px * var(--scale)) / calc(39px * var(--scale)) "Poppins", sans-serif;
    /* Premium Color Palette */
    --bs-main: #055059;
    --bs-main-hover: #044850;
    --hotel-primary: #055059;
    --hotel-primary-dark: #033840;
    --hotel-primary-light: #067182;
    --hotel-accent: #fef6dd;
    --hotel-accent-dark: #f4e5b8;
    --hotel-gold: #d4af37;
    --hotel-pearl: #f8f6f0;
    --txt-color: #1a1a1a;
    --color-error: #ef4444;
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-card: #ffffff;
    --bg-surface: #f9fafb;
    --bg-hover: #f3f4f6;
    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --text-disabled: #9ca3af;
    --text-placeholder: #d1d5db;
    /* Border Colors */
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    /* Glassmorphism Effects */
    --glass-light: rgba(255, 255, 255, 0.08);
    --glass-medium: rgba(255, 255, 255, 0.12);
    --glass-strong: rgba(255, 255, 255, 0.18);
    --glass-border: rgba(254, 246, 221, 0.2);
    /* Premium Shadows */
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* Premium Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-elegant: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-luxury: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    /* Style button */
    --bg-btn: var(--hotel-primary-light);
    --txt-btn: var(--hotel-accent);
    --color-green: var(--hotel-primary-light);
}

/* Dark Mode Support (Optional) */
[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-card: #1f2937;
    --bg-surface: #374151;
    --bg-hover: #4b5563;
    
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-disabled: #9ca3af;
    --text-placeholder: #6b7280;
    
    --border-color: #374151;
    --border-light: #4b5563;
}