/* ================================================================
   MASAHA STORAGE — Design Tokens & Custom Properties
   File: assets/css/variables.css
   Version: 2.0.0
   
   The single source of truth for all visual design tokens.
   Every color, shadow, radius, font, spacing, and timing value
   used across the booking system is defined here.
   ================================================================ */

/* ----------------------------------------------------------------
   ROOT TOKENS — Light Theme (Default)
   ---------------------------------------------------------------- */
:root {
    /* ============================================================
       BRAND COLORS
       Masaha Red is the primary brand identity color.
       All UI accents, CTAs, and interactive elements derive from it.
       ============================================================ */
    --m-primary: #EA4526;
    --m-primary-hover: #D63B1E;
    --m-primary-dark: #C93118;
    --m-primary-light: #FF6B4F;
    --m-primary-lighter: #FF8A74;
    --m-primary-50: rgba(234, 69, 38, 0.05);
    --m-primary-100: rgba(234, 69, 38, 0.10);
    --m-primary-150: rgba(234, 69, 38, 0.15);
    --m-primary-200: rgba(234, 69, 38, 0.20);
    --m-primary-glow: rgba(234, 69, 38, 0.18);
    --m-primary-ghost: rgba(234, 69, 38, 0.06);

    /* Gradient Presets */
    --m-gradient-primary: linear-gradient(135deg, #EA4526 0%, #FF6B4F 100%);
    --m-gradient-primary-hover: linear-gradient(135deg, #D63B1E 0%, #EA4526 100%);
    --m-gradient-brand: linear-gradient(135deg, #EA4526 0%, #FF8A74 50%, #EA4526 100%);
    --m-gradient-shimmer: linear-gradient(90deg, var(--m-primary) 0%, var(--m-primary-light) 50%, var(--m-primary) 100%);
    --m-gradient-ambient: 
        radial-gradient(ellipse at 20% 50%, rgba(234,69,38,0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(234,69,38,0.03) 0%, transparent 50%);

    /* ============================================================
       SEMANTIC COLORS
       Consistent status colors across the entire interface.
       Each includes a ghost variant for subtle backgrounds.
       ============================================================ */
    --m-success: #10B981;
    --m-success-dark: #059669;
    --m-success-light: #34D399;
    --m-success-ghost: rgba(16, 185, 129, 0.08);
    --m-success-100: rgba(16, 185, 129, 0.12);

    --m-warning: #F59E0B;
    --m-warning-dark: #D97706;
    --m-warning-light: #FBBF24;
    --m-warning-ghost: rgba(245, 158, 11, 0.08);
    --m-warning-100: rgba(245, 158, 11, 0.12);

    --m-danger: #EF4444;
    --m-danger-dark: #DC2626;
    --m-danger-light: #F87171;
    --m-danger-ghost: rgba(239, 68, 68, 0.08);
    --m-danger-100: rgba(239, 68, 68, 0.12);

    --m-info: #3B82F6;
    --m-info-dark: #2563EB;
    --m-info-light: #60A5FA;
    --m-info-ghost: rgba(59, 130, 246, 0.08);
    --m-info-100: rgba(59, 130, 246, 0.12);

    /* AC / Climate Control Blue */
    --m-frost: #0EA5E9;
    --m-frost-ghost: rgba(14, 165, 233, 0.06);
    --m-frost-100: rgba(14, 165, 233, 0.12);
    --m-gradient-frost: linear-gradient(135deg, rgba(14,165,233,0.05), rgba(6,182,212,0.08));

    /* ============================================================
       NEUTRAL SCALE
       Full gray ramp from near-white to near-black.
       Used for text, backgrounds, borders, and dividers.
       ============================================================ */
    --m-gray-25: #FCFCFD;
    --m-gray-50: #F9FAFB;
    --m-gray-100: #F3F4F6;
    --m-gray-150: #ECEDF0;
    --m-gray-200: #E5E7EB;
    --m-gray-300: #D1D5DB;
    --m-gray-400: #9CA3AF;
    --m-gray-500: #6B7280;
    --m-gray-600: #4B5563;
    --m-gray-700: #374151;
    --m-gray-800: #1F2937;
    --m-gray-900: #111827;
    --m-gray-950: #0B0F19;

    /* ============================================================
       SURFACE & BACKGROUND
       Layered surface system for visual hierarchy.
       ============================================================ */
    --m-bg: #F5F6FA;
    --m-bg-subtle: #FAFBFE;
    --m-surface: #FFFFFF;
    --m-surface-raised: #FFFFFF;
    --m-surface-overlay: rgba(255, 255, 255, 0.96);
    --m-surface-glass: rgba(255, 255, 255, 0.72);
    --m-backdrop: rgba(15, 23, 42, 0.5);
    --m-backdrop-heavy: rgba(15, 23, 42, 0.7);

    /* Borders */
    --m-border: #E5E7EB;
    --m-border-light: #F3F4F6;
    --m-border-strong: #D1D5DB;
    --m-border-focus: var(--m-primary);
    --m-border-success: var(--m-success);
    --m-border-danger: var(--m-danger);

    /* ============================================================
       TYPOGRAPHY
       Display font: Plus Jakarta Sans — geometric, modern, sharp.
       Body font: DM Sans — clean, readable, warm.
       Arabic: Noto Kufi Arabic — premium, balanced.
       ============================================================ */
    --m-font-display: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --m-font-body: 'DM Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --m-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', monospace;

    /* Type Scale — modular (1.25 ratio) */
    --m-text-xs: 0.75rem;      /* 12px */
    --m-text-sm: 0.8125rem;    /* 13px */
    --m-text-base: 0.9375rem;  /* 15px */
    --m-text-md: 1rem;         /* 16px */
    --m-text-lg: 1.125rem;     /* 18px */
    --m-text-xl: 1.25rem;      /* 20px */
    --m-text-2xl: 1.5rem;      /* 24px */
    --m-text-3xl: 1.75rem;     /* 28px */
    --m-text-4xl: 2.25rem;     /* 36px */
    --m-text-5xl: 3rem;        /* 48px */

    /* Font Weights */
    --m-weight-regular: 400;
    --m-weight-medium: 500;
    --m-weight-semibold: 600;
    --m-weight-bold: 700;
    --m-weight-extrabold: 800;

    /* Line Heights */
    --m-leading-tight: 1.2;
    --m-leading-snug: 1.35;
    --m-leading-normal: 1.5;
    --m-leading-relaxed: 1.65;
    --m-leading-loose: 1.8;

    /* Letter Spacing */
    --m-tracking-tighter: -0.03em;
    --m-tracking-tight: -0.02em;
    --m-tracking-normal: 0;
    --m-tracking-wide: 0.02em;
    --m-tracking-wider: 0.05em;
    --m-tracking-widest: 0.1em;

    /* ============================================================
       SHADOWS
       Layered shadow system. Each level adds perceived elevation.
       The "glow" variants add brand-colored ambience.
       ============================================================ */
    --m-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --m-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06),
                   0 1px 2px rgba(0, 0, 0, 0.04);
    --m-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
                0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --m-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
                   0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --m-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08),
                   0 8px 10px -6px rgba(0, 0, 0, 0.03);
    --m-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.18);
    --m-shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.25);
    --m-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

    /* Colored Shadows */
    --m-shadow-primary: 0 4px 14px rgba(234, 69, 38, 0.25);
    --m-shadow-primary-lg: 0 10px 30px rgba(234, 69, 38, 0.3);
    --m-shadow-primary-glow: 0 0 20px rgba(234, 69, 38, 0.15),
                              0 0 60px rgba(234, 69, 38, 0.05);
    --m-shadow-success: 0 4px 14px rgba(16, 185, 129, 0.25);
    --m-shadow-danger: 0 4px 14px rgba(239, 68, 68, 0.25);
    --m-shadow-frost: 0 4px 14px rgba(14, 165, 233, 0.2);

    /* Card Interaction Shadows */
    --m-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04),
                     0 4px 12px rgba(0, 0, 0, 0.03);
    --m-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.08),
                           0 0 0 1px rgba(234, 69, 38, 0.06);
    --m-shadow-card-active: 0 2px 8px rgba(0, 0, 0, 0.06),
                            0 0 0 2px rgba(234, 69, 38, 0.15);

    /* ============================================================
       BORDER RADIUS
       Consistent rounding scale from subtle to pill shapes.
       ============================================================ */
    --m-radius-xs: 4px;
    --m-radius-sm: 6px;
    --m-radius: 8px;
    --m-radius-md: 10px;
    --m-radius-lg: 14px;
    --m-radius-xl: 18px;
    --m-radius-2xl: 24px;
    --m-radius-3xl: 32px;
    --m-radius-full: 9999px;

    /* ============================================================
       TRANSITIONS & EASING
       Named curves for different interaction types.
       ============================================================ */
    --m-ease: cubic-bezier(0.4, 0, 0.2, 1);          /* standard */
    --m-ease-in: cubic-bezier(0.4, 0, 1, 1);          /* accelerate */
    --m-ease-out: cubic-bezier(0, 0, 0.2, 1);         /* decelerate */
    --m-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot */
    --m-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --m-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

    --m-dur-instant: 100ms;
    --m-dur-fast: 150ms;
    --m-dur: 250ms;
    --m-dur-slow: 400ms;
    --m-dur-slower: 600ms;
    --m-dur-entrance: 500ms;

    /* Composite Transitions (shortcuts) */
    --m-transition-fast: all 150ms var(--m-ease);
    --m-transition: all 250ms var(--m-ease);
    --m-transition-slow: all 400ms var(--m-ease);
    --m-transition-spring: all 400ms var(--m-ease-spring);
    --m-transition-color: color 150ms var(--m-ease), background-color 150ms var(--m-ease);
    --m-transition-shadow: box-shadow 250ms var(--m-ease);
    --m-transition-transform: transform 250ms var(--m-ease);

    /* ============================================================
       SPACING SCALE
       Consistent spatial rhythm (4px base unit).
       ============================================================ */
    --m-sp-0: 0;
    --m-sp-px: 1px;
    --m-sp-0-5: 2px;
    --m-sp-1: 4px;
    --m-sp-1-5: 6px;
    --m-sp-2: 8px;
    --m-sp-2-5: 10px;
    --m-sp-3: 12px;
    --m-sp-3-5: 14px;
    --m-sp-4: 16px;
    --m-sp-5: 20px;
    --m-sp-6: 24px;
    --m-sp-7: 28px;
    --m-sp-8: 32px;
    --m-sp-9: 36px;
    --m-sp-10: 40px;
    --m-sp-11: 44px;
    --m-sp-12: 48px;
    --m-sp-14: 56px;
    --m-sp-16: 64px;
    --m-sp-20: 80px;
    --m-sp-24: 96px;

    /* ============================================================
       Z-INDEX SCALE
       Orderly layering to prevent z-index wars.
       ============================================================ */
    --m-z-behind: -1;
    --m-z-base: 1;
    --m-z-dropdown: 10;
    --m-z-sticky: 20;
    --m-z-header: 30;
    --m-z-sidebar: 40;
    --m-z-overlay: 100;
    --m-z-modal: 200;
    --m-z-popover: 300;
    --m-z-toast: 1300;
    --m-z-loading: 800;
    --m-z-max: 9999;

    /* ============================================================
       LAYOUT
       Container widths and content constraints.
       ============================================================ */
    --m-container-sm: 640px;
    --m-container-md: 768px;
    --m-container-lg: 1024px;
    --m-container-xl: 1280px;
    --m-container-2xl: 1440px;
    --m-content-width: 1200px;
    --m-sidebar-width: 340px;

    /* ============================================================
       BREAKPOINTS (reference only — use in @media directly)
       Mobile: < 576px
       Tablet: 576px–992px
       Desktop: > 992px
       Large: > 1200px
       ============================================================ */

    /* ============================================================
       COMPONENT-SPECIFIC TOKENS
       Tokens scoped to specific UI patterns.
       ============================================================ */
    
    /* Input Fields */
    --m-input-height: 48px;
    --m-input-height-lg: 56px;
    --m-input-bg: var(--m-gray-50);
    --m-input-bg-focus: #FFFFFF;
    --m-input-border: var(--m-border);
    --m-input-border-focus: var(--m-primary);
    --m-input-radius: var(--m-radius-md);
    --m-input-ring: 0 0 0 4px var(--m-primary-glow);
    --m-input-ring-danger: 0 0 0 4px var(--m-danger-ghost);
    --m-input-ring-success: 0 0 0 4px var(--m-success-ghost);
    --m-input-padding-x: 16px;
    --m-input-padding-y: 12px;
    --m-input-font-size: var(--m-text-base);

    /* Buttons */
    --m-btn-height: 48px;
    --m-btn-height-sm: 36px;
    --m-btn-height-lg: 56px;
    --m-btn-radius: var(--m-radius-full);
    --m-btn-font-weight: 600;
    --m-btn-padding-x: 28px;
    --m-btn-padding-x-lg: 36px;

    /* Cards */
    --m-card-bg: var(--m-surface);
    --m-card-border: var(--m-border-light);
    --m-card-radius: var(--m-radius-xl);
    --m-card-padding: var(--m-sp-6);
    --m-card-shadow: var(--m-shadow-card);
    --m-card-shadow-hover: var(--m-shadow-card-hover);

    /* Progress Tracker */
    --m-progress-dot-size: 44px;
    --m-progress-dot-size-active: 48px;
    --m-progress-line-height: 3px;

    /* OTP Inputs */
    --m-otp-size: 56px;
    --m-otp-size-mobile: 46px;
    --m-otp-gap: 10px;
    --m-otp-font-size: 1.5rem;

    /* Storage Cards */
    --m-storage-card-min-width: 280px;

    /* Duration Cards */
    --m-duration-card-min-width: 160px;

    /* Sidebar */
    --m-summary-top-offset: 110px;
}

/* ----------------------------------------------------------------
   RTL FONT STACK OVERRIDE
   When Arabic is active, replace display/body fonts with
   Cairo which provides excellent readability for Arabic text.
   ---------------------------------------------------------------- */
html[dir="rtl"],
html[lang="ar"],
.is-rtl {
    --m-font-display: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', 'Plus Jakarta Sans', sans-serif;
    --m-font-body: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', 'DM Sans', sans-serif;
    --m-font-display-rtl: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', 'Plus Jakarta Sans', sans-serif;
    --m-font-body-rtl: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', 'DM Sans', sans-serif;
}

/* ----------------------------------------------------------------
   DARK MODE TOKENS (future-proof)
   Activated via prefers-color-scheme or .dark-mode class.
   ---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root.auto-theme {
        --m-bg: #0F1117;
        --m-bg-subtle: #151820;
        --m-surface: #1A1D27;
        --m-surface-raised: #22252F;
        --m-surface-overlay: rgba(26, 29, 39, 0.96);
        --m-surface-glass: rgba(26, 29, 39, 0.72);

        --m-border: #2D3141;
        --m-border-light: #252836;
        --m-border-strong: #3D4155;

        --m-gray-50: #1A1D27;
        --m-gray-100: #22252F;
        --m-gray-200: #2D3141;
        --m-gray-300: #3D4155;
        --m-gray-400: #6B7280;
        --m-gray-500: #9CA3AF;
        --m-gray-600: #D1D5DB;
        --m-gray-700: #E5E7EB;
        --m-gray-800: #F3F4F6;
        --m-gray-900: #F9FAFB;

        --m-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
        --m-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.4),
                               0 0 0 1px rgba(234, 69, 38, 0.1);

        --m-input-bg: #22252F;
        --m-input-bg-focus: #2D3141;
        --m-card-bg: var(--m-surface);
    }
}

/* ----------------------------------------------------------------
   KEYFRAME ANIMATIONS (shared across all components)
   Defined here so any CSS file can reference them.
   ---------------------------------------------------------------- */
@keyframes masahaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes masahaFadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes masahaFadeInDown {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes masahaSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes masahaSlideDown {
    from { opacity: 0; transform: translateY(-24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes masahaSlideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes masahaSlideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes masahaScaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes masahaScaleBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes masahaPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes masahaPulseRing {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes masahaFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes masahaSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes masahaSpinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes masahaShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes masahaShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes masahaCheckmark {
    0% { stroke-dashoffset: 48; }
    100% { stroke-dashoffset: 0; }
}

@keyframes masahaProgressGlow {
    0%, 100% { box-shadow: 0 0 4px var(--m-primary-glow); }
    50% { box-shadow: 0 0 16px var(--m-primary-glow); }
}

@keyframes masahaConfettiDrop {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes masahaGradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes masahaTypingDot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* ----------------------------------------------------------------
   REDUCED MOTION
   Respect user preference — disable all animations globally.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----------------------------------------------------------------
   HIGH CONTRAST MODE
   Strengthen borders and remove subtle shadows.
   ---------------------------------------------------------------- */
@media (prefers-contrast: high) {
    :root {
        --m-border: #000000;
        --m-border-light: #333333;
        --m-shadow-card: none;
        --m-shadow-card-hover: 0 0 0 2px #000000;
    }
}

/* ----------------------------------------------------------------
   PRINT TOKENS
   Simplify for print — no shadows, borders, or backgrounds.
   ---------------------------------------------------------------- */
@media print {
    :root {
        --m-bg: #FFFFFF;
        --m-surface: #FFFFFF;
        --m-shadow-card: none;
        --m-shadow: none;
        --m-shadow-lg: none;
    }
}