/**
 * TripMura Design System — Tokens
 * Visual Aesthetic: Crisp Light Luxury & Mediterranean Sunlight
 */

:root {
  /* ==========================================================================
     1. Color Palette (Porcelain White, Warm Deep Slate, Sunlit Cyan & Azure)
     ========================================================================== */
  --bg-body: #fafbfc;
  --bg-card: #ffffff;
  --bg-card-subtle: #f8fafc;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-glass-heavy: rgba(255, 255, 255, 0.92);
  --bg-glass-subtle: rgba(255, 255, 255, 0.65);
  --bg-obsidian: #07080b;
  --bg-dark-card: #0f172a;
  
  /* Text Colors */
  --text-primary: #0f172a;        /* Warm Deep Slate */
  --text-secondary: #475569;      /* Slate 600 */
  --text-muted: #94a3b8;          /* Slate 400 */
  --text-inverse: #ffffff;
  --text-inverse-muted: #94a3b8;

  /* Mediterranean Azure Accents */
  --primary-cyan: #00f2fe;        /* Electric Mediterranean Cyan */
  --primary-azure: #0284c7;       /* Sunlit Azure Sky 600 */
  --primary-azure-dark: #0369a1;  /* Deep Azure 700 */
  --primary-azure-light: #e0f2fe; /* Soft Azure Wash 100 */
  --primary-azure-50: #f0f9ff;    /* Ultra-soft Azure Tint 50 */
  
  /* Gradients */
  --gradient-azure: linear-gradient(135deg, #00f2fe 0%, #0284c7 100%);
  --gradient-azure-hover: linear-gradient(135deg, #38f9d7 0%, #0284c7 100%);
  --gradient-sky-glow: radial-gradient(at 10% 10%, rgba(0, 242, 254, 0.12) 0px, transparent 50%),
                       radial-gradient(at 90% 20%, rgba(2, 132, 199, 0.10) 0px, transparent 50%),
                       radial-gradient(at 50% 90%, rgba(248, 250, 252, 1) 0px, transparent 50%);
  --gradient-card-border: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(2, 132, 199, 0.15));

  /* Status & Accents */
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;

  /* ==========================================================================
     2. Borders & Glassmorphism
     ========================================================================== */
  --border-card: rgba(15, 23, 42, 0.08);
  --border-light: rgba(15, 23, 42, 0.08);
  --border-subtle: rgba(15, 23, 42, 0.04);
  --border-glass: rgba(255, 255, 255, 0.85);
  --border-glass-accent: rgba(2, 132, 199, 0.2);
  --border-focus: rgba(2, 132, 199, 0.45);
  
  --backdrop-blur-sm: blur(12px);
  --backdrop-blur-md: blur(20px);
  --backdrop-blur-lg: blur(32px);

  /* ==========================================================================
     3. Elevation & Multi-Layer Shadows (Refined Tinted Ambient Depth)
     ========================================================================== */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 4px 12px -2px rgba(15, 23, 42, 0.04), 0 2px 4px -1px rgba(15, 23, 42, 0.02);
  --shadow-card: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-elevation: 0 12px 32px -8px rgba(2, 132, 199, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 20px 30px -10px rgba(2, 132, 199, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-glass: 0 24px 60px rgba(15, 23, 42, 0.14), 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 20px 40px -10px rgba(15, 23, 42, 0.12), 0 4px 16px -2px rgba(15, 23, 42, 0.06);

  /* ==========================================================================
     4. Typography (Fluid Scale via CSS clamp)
     ========================================================================== */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  --font-hero: clamp(2.35rem, 5vw + 0.8rem, 4.25rem);
  --font-h1: clamp(2rem, 3.8vw + 0.5rem, 3.25rem);
  --font-h2: clamp(1.65rem, 2.8vw + 0.4rem, 2.5rem);
  --font-h3: clamp(1.25rem, 1.6vw + 0.3rem, 1.75rem);
  --font-h4: clamp(1.1rem, 0.8vw + 0.4rem, 1.35rem);
  --font-body-lg: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);
  --font-body: clamp(0.95rem, 0.25vw + 0.88rem, 1.05rem);
  --font-body-sm: clamp(0.82rem, 0.2vw + 0.76rem, 0.9rem);
  --font-caption: 0.78rem;

  --line-height-tight: 1.12;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.06em;

  /* ==========================================================================
     5. Concentric Radius & 8pt Spatial Scale
     Formula: Outer Radius = Inner Radius + Padding
     ========================================================================== */
  --radius-xs: 6px;
  --radius-inner-sm: 8px;
  --radius-sm: 8px;
  --radius-inner-md: 12px;
  --radius-md: 12px;
  --radius-card-sm: 20px;
  --radius-card-lg: 24px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* 8-Point Standard Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Semantic Spacing Aliases */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --container-max: 1280px;
  --container-padding: clamp(16px, 4vw, 32px);

  /* ==========================================================================
     6. Transitions & Motion
     ========================================================================== */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease-smooth);
  --transition-normal: 250ms var(--ease-spring);
  --transition-slow: 400ms var(--ease-spring);

  /* ==========================================================================
     7. Z-Index Scale
     ========================================================================== */
  --z-negative: -1;
  --z-elevate: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-navbar: 500;
  --z-drawer-backdrop: 900;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}