/*
=====================================================================
  Parkify Enterprise Design System
  File: assets/css/variables.css
  Purpose: Central design tokens for the entire Parkify platform.
=====================================================================
*/

:root {
  /* ================================================================
     Brand Identity
  ================================================================ */
  --pf-brand-name: "Parkify";

  --pf-primary-50: #ecfdf5;
  --pf-primary-100: #d1fae5;
  --pf-primary-200: #a7f3d0;
  --pf-primary-300: #6ee7b7;
  --pf-primary-400: #34d399;
  --pf-primary-500: #10b981;
  --pf-primary-600: #059669;
  --pf-primary-700: #047857;
  --pf-primary-800: #065f46;
  --pf-primary-900: #064e3b;
  --pf-primary-950: #022c22;

  --pf-cyan-50: #ecfeff;
  --pf-cyan-100: #cffafe;
  --pf-cyan-200: #a5f3fc;
  --pf-cyan-300: #67e8f9;
  --pf-cyan-400: #22d3ee;
  --pf-cyan-500: #06b6d4;
  --pf-cyan-600: #0891b2;
  --pf-cyan-700: #0e7490;
  --pf-cyan-800: #155e75;
  --pf-cyan-900: #164e63;
  --pf-cyan-950: #083344;

  --pf-blue-50: #eff6ff;
  --pf-blue-100: #dbeafe;
  --pf-blue-200: #bfdbfe;
  --pf-blue-300: #93c5fd;
  --pf-blue-400: #60a5fa;
  --pf-blue-500: #3b82f6;
  --pf-blue-600: #2563eb;
  --pf-blue-700: #1d4ed8;
  --pf-blue-800: #1e40af;
  --pf-blue-900: #1e3a8a;
  --pf-blue-950: #172554;

  /* ================================================================
     Neutral Palette
  ================================================================ */
  --pf-white: #ffffff;
  --pf-black: #000000;

  --pf-slate-50: #f8fafc;
  --pf-slate-100: #f1f5f9;
  --pf-slate-200: #e2e8f0;
  --pf-slate-300: #cbd5e1;
  --pf-slate-400: #94a3b8;
  --pf-slate-500: #64748b;
  --pf-slate-600: #475569;
  --pf-slate-700: #334155;
  --pf-slate-800: #1e293b;
  --pf-slate-900: #0f172a;
  --pf-slate-950: #020617;

  /* ================================================================
     Semantic Colors
  ================================================================ */
  --pf-success-50: #ecfdf5;
  --pf-success-500: #22c55e;
  --pf-success-600: #16a34a;
  --pf-success-700: #15803d;

  --pf-warning-50: #fffbeb;
  --pf-warning-500: #f59e0b;
  --pf-warning-600: #d97706;
  --pf-warning-700: #b45309;

  --pf-danger-50: #fef2f2;
  --pf-danger-500: #ef4444;
  --pf-danger-600: #dc2626;
  --pf-danger-700: #b91c1c;

  --pf-info-50: #eff6ff;
  --pf-info-500: #3b82f6;
  --pf-info-600: #2563eb;
  --pf-info-700: #1d4ed8;

  /* ================================================================
     Main Theme: Dark Premium
  ================================================================ */
  --pf-bg: #020617;
  --pf-bg-soft: #07111f;
  --pf-bg-elevated: #0b1628;
  --pf-bg-muted: #111c2f;
  --pf-bg-inverse: #f8fafc;

  --pf-surface: rgba(15, 23, 42, 0.78);
  --pf-surface-strong: rgba(15, 23, 42, 0.94);
  --pf-surface-soft: rgba(30, 41, 59, 0.62);
  --pf-surface-muted: rgba(51, 65, 85, 0.42);
  --pf-surface-light: rgba(255, 255, 255, 0.06);
  --pf-surface-hover: rgba(255, 255, 255, 0.1);

  --pf-glass: rgba(15, 23, 42, 0.6);
  --pf-glass-strong: rgba(15, 23, 42, 0.82);
  --pf-glass-light: rgba(255, 255, 255, 0.08);
  --pf-glass-border: rgba(255, 255, 255, 0.12);

  --pf-text: #f8fafc;
  --pf-text-soft: #dbeafe;
  --pf-text-muted: #94a3b8;
  --pf-text-faint: #64748b;
  --pf-text-inverse: #020617;

  --pf-border: rgba(148, 163, 184, 0.2);
  --pf-border-soft: rgba(148, 163, 184, 0.12);
  --pf-border-strong: rgba(148, 163, 184, 0.34);
  --pf-border-focus: rgba(16, 185, 129, 0.68);

  /* ================================================================
     Gradients
  ================================================================ */
  --pf-gradient-primary: linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #3b82f6 100%);
  --pf-gradient-hero: radial-gradient(circle at 20% 10%, rgba(16, 185, 129, 0.34), transparent 32%), radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.28), transparent 34%), linear-gradient(135deg, #020617 0%, #07111f 48%, #0b1220 100%);
  --pf-gradient-card: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.035));
  --pf-gradient-glow: radial-gradient(circle, rgba(16,185,129,0.32), transparent 58%);
  --pf-gradient-danger: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  --pf-gradient-warning: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --pf-gradient-success: linear-gradient(135deg, #22c55e 0%, #10b981 100%);

  /* ================================================================
     Parking Specific Tokens
  ================================================================ */
  --pf-parking-free: #10b981;
  --pf-parking-reserved: #f59e0b;
  --pf-parking-occupied: #ef4444;
  --pf-parking-offline: #64748b;
  --pf-parking-premium: #3b82f6;
  --pf-parking-ev: #22d3ee;
  --pf-parking-camera: #a78bfa;
  --pf-parking-covered: #38bdf8;

  /* ================================================================
     Payment Tokens
  ================================================================ */
  --pf-payment-paid: #22c55e;
  --pf-payment-pending: #f59e0b;
  --pf-payment-failed: #ef4444;
  --pf-payment-refunded: #06b6d4;

  /* ================================================================
     Typography Tokens
  ================================================================ */
  --pf-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pf-font-display: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --pf-font-size-xs: 0.75rem;
  --pf-font-size-sm: 0.875rem;
  --pf-font-size-base: 1rem;
  --pf-font-size-md: 1.0625rem;
  --pf-font-size-lg: 1.125rem;
  --pf-font-size-xl: 1.25rem;
  --pf-font-size-2xl: 1.5rem;
  --pf-font-size-3xl: 1.875rem;
  --pf-font-size-4xl: 2.25rem;
  --pf-font-size-5xl: 3rem;
  --pf-font-size-6xl: 3.75rem;
  --pf-font-size-7xl: 4.5rem;

  --pf-line-tight: 1.05;
  --pf-line-snug: 1.18;
  --pf-line-normal: 1.55;
  --pf-line-relaxed: 1.75;

  --pf-weight-regular: 400;
  --pf-weight-medium: 500;
  --pf-weight-semibold: 600;
  --pf-weight-bold: 700;
  --pf-weight-extrabold: 800;
  --pf-weight-black: 900;

  --pf-letter-tight: -0.04em;
  --pf-letter-normal: 0em;
  --pf-letter-wide: 0.04em;

  /* ================================================================
     Spacing Scale
  ================================================================ */
  --pf-space-0: 0;
  --pf-space-1: 0.25rem;
  --pf-space-2: 0.5rem;
  --pf-space-3: 0.75rem;
  --pf-space-4: 1rem;
  --pf-space-5: 1.25rem;
  --pf-space-6: 1.5rem;
  --pf-space-7: 1.75rem;
  --pf-space-8: 2rem;
  --pf-space-10: 2.5rem;
  --pf-space-12: 3rem;
  --pf-space-14: 3.5rem;
  --pf-space-16: 4rem;
  --pf-space-20: 5rem;
  --pf-space-24: 6rem;
  --pf-space-28: 7rem;
  --pf-space-32: 8rem;

  /* ================================================================
     Radius
  ================================================================ */
  --pf-radius-none: 0;
  --pf-radius-xs: 0.375rem;
  --pf-radius-sm: 0.5rem;
  --pf-radius-md: 0.75rem;
  --pf-radius-lg: 1rem;
  --pf-radius-xl: 1.25rem;
  --pf-radius-2xl: 1.5rem;
  --pf-radius-3xl: 2rem;
  --pf-radius-4xl: 2.5rem;
  --pf-radius-full: 9999px;

  /* ================================================================
     Shadows
  ================================================================ */
  --pf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --pf-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.18);
  --pf-shadow-md: 0 14px 36px rgba(0, 0, 0, 0.24);
  --pf-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.32);
  --pf-shadow-xl: 0 36px 90px rgba(0, 0, 0, 0.42);
  --pf-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --pf-shadow-glow: 0 0 28px rgba(16, 185, 129, 0.32);
  --pf-shadow-blue-glow: 0 0 34px rgba(59, 130, 246, 0.28);
  --pf-shadow-danger-glow: 0 0 28px rgba(239, 68, 68, 0.24);

  /* ================================================================
     Containers
  ================================================================ */
  --pf-container-xs: 34rem;
  --pf-container-sm: 42rem;
  --pf-container-md: 52rem;
  --pf-container-lg: 64rem;
  --pf-container-xl: 76rem;
  --pf-container-2xl: 88rem;
  --pf-container-wide: 96rem;

  --pf-page-padding: clamp(1rem, 4vw, 2.5rem);
  --pf-section-padding: clamp(3rem, 8vw, 7rem);
  --pf-card-padding: clamp(1rem, 2vw, 1.5rem);

  /* ================================================================
     Layout
  ================================================================ */
  --pf-navbar-height: 76px;
  --pf-sidebar-width: 280px;
  --pf-sidebar-collapsed-width: 88px;
  --pf-filter-height: 74px;
  --pf-footer-min-height: 320px;

  /* ================================================================
     Transitions
  ================================================================ */
  --pf-transition-fast: 150ms ease;
  --pf-transition-base: 220ms ease;
  --pf-transition-slow: 360ms ease;
  --pf-transition-bounce: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --pf-transition-smooth: 520ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ================================================================
     Blur / Backdrop
  ================================================================ */
  --pf-blur-sm: blur(8px);
  --pf-blur-md: blur(16px);
  --pf-blur-lg: blur(24px);
  --pf-blur-xl: blur(36px);

  /* ================================================================
     Z-index Scale
  ================================================================ */
  --pf-z-base: 1;
  --pf-z-elevated: 10;
  --pf-z-sticky: 100;
  --pf-z-dropdown: 200;
  --pf-z-navbar: 300;
  --pf-z-overlay: 600;
  --pf-z-modal: 700;
  --pf-z-toast: 800;
  --pf-z-loader: 900;

  /* ================================================================
     Forms
  ================================================================ */
  --pf-input-height-sm: 42px;
  --pf-input-height-md: 50px;
  --pf-input-height-lg: 58px;
  --pf-input-bg: rgba(15, 23, 42, 0.72);
  --pf-input-bg-hover: rgba(30, 41, 59, 0.78);
  --pf-input-border: rgba(148, 163, 184, 0.2);
  --pf-input-border-focus: rgba(16, 185, 129, 0.7);
  --pf-input-placeholder: rgba(148, 163, 184, 0.76);

  /* ================================================================
     Buttons
  ================================================================ */
  --pf-btn-height-sm: 38px;
  --pf-btn-height-md: 46px;
  --pf-btn-height-lg: 56px;
  --pf-btn-radius: var(--pf-radius-full);
  --pf-btn-padding-sm: 0 0.9rem;
  --pf-btn-padding-md: 0 1.15rem;
  --pf-btn-padding-lg: 0 1.45rem;

  /* ================================================================
     Breakpoints
     Note: use these as documentation; CSS custom properties cannot be used
     directly inside @media conditions in all browsers.
  ================================================================ */
  --pf-breakpoint-xs: 360px;
  --pf-breakpoint-sm: 480px;
  --pf-breakpoint-md: 768px;
  --pf-breakpoint-lg: 1024px;
  --pf-breakpoint-xl: 1280px;
  --pf-breakpoint-2xl: 1536px;
  --pf-breakpoint-4k: 2560px;
}

/* =====================================================================
   Light Theme Support
   Add data-theme="light" on html/body when needed.
===================================================================== */
[data-theme="light"] {
  --pf-bg: #f8fafc;
  --pf-bg-soft: #eef5ff;
  --pf-bg-elevated: #ffffff;
  --pf-bg-muted: #f1f5f9;
  --pf-bg-inverse: #020617;

  --pf-surface: rgba(255, 255, 255, 0.84);
  --pf-surface-strong: rgba(255, 255, 255, 0.96);
  --pf-surface-soft: rgba(248, 250, 252, 0.72);
  --pf-surface-muted: rgba(226, 232, 240, 0.72);
  --pf-surface-light: rgba(2, 6, 23, 0.04);
  --pf-surface-hover: rgba(2, 6, 23, 0.07);

  --pf-glass: rgba(255, 255, 255, 0.68);
  --pf-glass-strong: rgba(255, 255, 255, 0.88);
  --pf-glass-light: rgba(2, 6, 23, 0.05);
  --pf-glass-border: rgba(15, 23, 42, 0.1);

  --pf-text: #020617;
  --pf-text-soft: #0f172a;
  --pf-text-muted: #475569;
  --pf-text-faint: #64748b;
  --pf-text-inverse: #f8fafc;

  --pf-border: rgba(15, 23, 42, 0.12);
  --pf-border-soft: rgba(15, 23, 42, 0.08);
  --pf-border-strong: rgba(15, 23, 42, 0.18);

  --pf-gradient-hero: radial-gradient(circle at 20% 10%, rgba(16, 185, 129, 0.18), transparent 32%), radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.16), transparent 34%), linear-gradient(135deg, #f8fafc 0%, #eef5ff 54%, #ffffff 100%);
}

/* =====================================================================
   High Contrast Mode
===================================================================== */
[data-contrast="high"] {
  --pf-text: #ffffff;
  --pf-text-muted: #dbeafe;
  --pf-border: rgba(255, 255, 255, 0.32);
  --pf-border-strong: rgba(255, 255, 255, 0.48);
  --pf-surface: rgba(15, 23, 42, 0.92);
}