/* ==========================================================================
   SEEYOUSOON SUPER-APP — ULTRA-GLASS LUXURY DESIGN TOKENS
   ========================================================================== */

:root {
  /* Ultra-Luxe Deep Canvas */
  --ink: #050711;
  --ink-2: #0B0F24;
  --ink-3: #121838;
  --paper: #FFFFFF;
  --paper-dim: #F1F5F9;
  --paper-muted: #94A3B8;

  /* Vivid Neon Palette & Brand Accents */
  --primary: #8B5CF6;
  --primary-hi: #A855F7;
  --purple: #A855F7;
  --purple-glow: rgba(168, 85, 247, 0.45);
  --indigo: #6366F1;
  --indigo-glow: rgba(99, 102, 241, 0.45);
  --blue: #3B82F6;
  --blue-glow: rgba(59, 130, 246, 0.45);
  --cyan: #06B6D4;
  --cyan-glow: rgba(6, 182, 212, 0.45);
  --kr-green: #10B981;
  --kr-green-glow: rgba(16, 185, 129, 0.45);
  --amber: #F59E0B;
  --amber-glow: rgba(245, 158, 11, 0.45);
  --rose: #F43F5E;
  --rose-glow: rgba(244, 63, 94, 0.45);

  /* Ultra-Glass Refraction & Surfaces */
  --glass-bg: rgba(11, 15, 34, 0.82);
  --glass-bg-elevated: rgba(16, 22, 48, 0.92);
  --glass-surface: rgba(13, 18, 40, 0.78);
  --glass-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%);
  --glass-card-hover: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
  --glass-header-bg: linear-gradient(135deg, rgba(14, 19, 42, 0.92) 0%, rgba(9, 12, 28, 0.85) 100%);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-hi: rgba(168, 85, 247, 0.55);
  --glass-border-amber: rgba(245, 158, 11, 0.45);
  --glass-border-cyan: rgba(6, 182, 212, 0.45);
  --glass-border-green: rgba(16, 185, 129, 0.45);
  --glass-input-bg: rgba(6, 9, 20, 0.88);

  /* Dynamic Specular Edge Gradients */
  --glass-rim: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05));
  --glass-rim-neon: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), rgba(99, 102, 241, 0.8), rgba(6, 182, 212, 0.6), transparent);

  /* Shadows & Inner Specular Glow */
  --shadow-sheet: 0 -24px 64px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.25);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.22);
  --shadow-luxe: 0 16px 44px rgba(0, 0, 0, 0.45), inset 0 1px 1.5px rgba(255, 255, 255, 0.25);
  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 28px rgba(139, 92, 246, 0.28);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --font-arabic: 'Cairo', 'Plus Jakarta Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Geometry & Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 9999px;

  /* Layout Constants (Swipe Gesture Maintained 100%) */
  --sheet-collapsed: 18vh;
  --sheet-half: 52vh;
  --sheet-expanded: calc(100dvh - (var(--safe-top) + 84px));
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Z-Index Hierarchy */
  --z-map: 1;
  --z-map-controls: 10;
  --z-sheet: 30;
  --z-topbar: 40;
  --z-modal: 60;
  --z-toast: 100001;
  --z-offline: 100002;

  /* ===== Service Spectrum ===== */
  --hue-taxi: #8B5CF6;
  --hue-mat: #F97316;
  --hue-skonhet: #EC4899;
  --hue-stad: #14B8A6;
  --hue-flytt: #6366F1;
  --hue-biltvatt: #06B6D4;
  --hue-hantverk: #EAB308;
  --hue-shopping: #84CC16;
  --hue-resor: #38BDF8;

  /* ===== Semantic Status ===== */
  --ok: #10B981;
  --live: #F59E0B;
  --err: #EF4444;

  /* ===== Glass Stack (from DESIGN.md Elevation & Depth) ===== */
  /* Canvas — Ground Floor */
  --glass-canvas: #090B10;
  --glass-canvas-aurora: radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.12), transparent 70%);

  /* Glass Level 1 — Structural Surfaces */
  --glass-l1-bg: rgba(14, 18, 30, 0.7);
  --glass-l1-blur: 16px;
  --glass-l1-border: rgba(255, 255, 255, 0.05);

  /* Glass Level 2 — Floating Cards, Navbars */
  --glass-l2-bg: rgba(20, 26, 41, 0.6);
  --glass-l2-blur: 24px;
  --glass-l2-border: rgba(168, 85, 247, 0.18);

  /* Glass Level 3 — Dialogs, Overlays */
  --glass-l3-bg: rgba(20, 26, 41, 0.85);
  --glass-l3-blur: 32px;
  --glass-l3-border: rgba(192, 132, 252, 0.3);

  /* Specular & Neon Glow */
  --glass-specular-top: inset 0 1px 1px 0 rgba(255, 255, 255, 0.12);
  --glass-neon-active: 0 0 20px -2px rgba(139, 92, 246, 0.45), 0 0 40px -4px rgba(124, 58, 237, 0.25);

  /* ===== Design System Surface Palette ===== */
  --ds-surface: #111318;
  --ds-surface-dim: #111318;
  --ds-surface-bright: #37393f;
  --ds-surface-lowest: #0c0e13;
  --ds-surface-low: #1a1b21;
  --ds-surface-container: #1e1f25;
  --ds-surface-high: #282a2f;
  --ds-surface-highest: #33353a;
  --ds-on-surface: #e2e2e9;
  --ds-on-surface-variant: #cbc3d7;
  --ds-outline: #958ea0;
  --ds-outline-variant: #494454;

  /* ===== Active Service Hue (derived via data-service) ===== */
  --hue: var(--hue-taxi);

  /* ===== Map Dark Style Colors ===== */
  --map-bg: #090B10;
  --map-streets: #1A1F2E;
  --map-water: #0B1222;
  --map-parks: #0F1A17;
  --map-labels: #64748B;
}

/* === Service hue derivation via data-service attribute === */
[data-service="taxi"]     { --hue: var(--hue-taxi); }
[data-service="mat"]      { --hue: var(--hue-mat); }
[data-service="skonhet"]  { --hue: var(--hue-skonhet); }
[data-service="stad"]     { --hue: var(--hue-stad); }
[data-service="flytt"]    { --hue: var(--hue-flytt); }
[data-service="biltvatt"] { --hue: var(--hue-biltvatt); }
[data-service="hantverk"] { --hue: var(--hue-hantverk); }
[data-service="shopping"] { --hue: var(--hue-shopping); }
[data-service="resor"]    { --hue: var(--hue-resor); }