/* ============================================================
 * Metropole Shared Design Tokens
 * Extracted from CRM (index-BbGeKZ_k.css) — Dark Theme
 * Applied to: CRM, ECC v2, future Metropole apps
 * ============================================================ */

:root {
  /* ── Typography ─────────────────────────────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-serif: Georgia, serif;
  --tracking-normal: 0em;

  /* ── Spacing & Radius ───────────────────────────────────── */
  --spacing: 0.25rem;
  --radius: 0.5rem;

  /* ── Core Colors (HSL channels for Tailwind opacity) ───── */
  --background: 210 40% 10%;
  --foreground: 40 4% 90%;
  --card: 210 35% 14%;
  --card-foreground: 40 4% 90%;
  --card-border: 210 35% 15%;
  --popover: 210 35% 12%;
  --popover-foreground: 40 4% 90%;
  --popover-border: 210 30% 17%;
  --primary: 188 35% 47%;
  --primary-foreground: 210 40% 10%;
  --primary-border: hsl(var(--primary));
  --secondary: 210 33% 17%;
  --secondary-foreground: 40 4% 90%;
  --secondary-border: hsl(var(--secondary));
  --muted: 210 33% 17%;
  --muted-foreground: 220 5% 46%;
  --muted-border: hsl(var(--muted));
  --accent: 210 33% 17%;
  --accent-foreground: 40 4% 90%;
  --accent-border: hsl(var(--accent));
  --destructive: 320 47% 60%;
  --destructive-foreground: 40 4% 90%;
  --destructive-border: hsl(var(--destructive));
  --border: 210 30% 17%;
  --input: 210 30% 22%;
  --ring: 188 35% 47%;

  /* ── Sidebar ────────────────────────────────────────────── */
  --sidebar: 210 42% 8%;
  --sidebar-foreground: 40 4% 90%;
  --sidebar-primary: 188 35% 47%;
  --sidebar-primary-foreground: 40 4% 90%;
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-accent: 210 33% 17%;
  --sidebar-accent-foreground: 40 4% 90%;
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --sidebar-border: 210 30% 17%;
  --sidebar-ring: 188 35% 47%;

  /* ── Charts ─────────────────────────────────────────────── */
  --chart-1: 188 35% 47%;
  --chart-2: 97 43% 47%;
  --chart-3: 20 53% 48%;
  --chart-4: 43 74% 55%;
  --chart-5: 320 47% 60%;

  /* ── Shadows (dark-optimized) ───────────────────────────── */
  --shadow-2xs: 0px 2px 0px 0px hsl(0 0% 0% / 0);
  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / .15);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / .2), 0px 1px 2px -1px hsl(0 0% 0% / .15);
  --shadow: 0px 2px 4px 0px hsl(0 0% 0% / .2), 0px 1px 2px -1px hsl(0 0% 0% / .15);
  --shadow-md: 0px 4px 8px 0px hsl(0 0% 0% / .25), 0px 2px 4px -1px hsl(0 0% 0% / .15);
  --shadow-lg: 0px 8px 16px 0px hsl(0 0% 0% / .3), 0px 4px 6px -1px hsl(0 0% 0% / .15);
  --shadow-xl: 0px 16px 32px 0px hsl(0 0% 0% / .35), 0px 8px 10px -1px hsl(0 0% 0% / .15);
  --shadow-2xl: 0px 24px 48px 0px hsl(0 0% 0% / .4);

  /* ── Elevation & Utility ────────────────────────────────── */
  --elevate-1: rgba(255, 255, 255, 0.04);
  --elevate-2: rgba(255, 255, 255, 0.09);
  --badge-outline: rgba(255, 255, 255, 0.05);
  --button-outline: rgba(255, 255, 255, 0.1);
}