/* ===================================================
   CSS Custom Properties — Deliverty Design System
   =================================================== */

:root {
  --primary: 193 60% 45%;
  --primary-fg: 0 0% 100%;
  --bg: 0 0% 100%;
  --fg: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-fg: 222.2 84% 4.9%;
  --muted: 210 40% 96.1%;
  --muted-fg: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  --accent: 192 40% 95%;
  --accent-fg: 193 60% 30%;
  --success: 142 71% 45%;
  --radius: 0.625rem;
  --nav-bg: rgba(255, 255, 255, 0.82);
  --nav-border: rgba(0, 0, 0, 0.06);
  --hero-bg: linear-gradient(135deg, hsl(192 50% 96%) 0%, hsl(0 0% 100%) 50%, hsl(192 40% 97%) 100%);
  --hero-overlay: rgba(255, 255, 255, 0.7);
  --section-alt: hsl(192 30% 98%);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --card-hover-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  --integration-bg: hsl(192 30% 96%);
}

.dark {
  --primary: 193 55% 50%;
  --primary-fg: 193 60% 5%;
  --bg: 222.2 84% 4.9%;
  --fg: 210 40% 98%;
  --card: 222 60% 7%;
  --card-fg: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-fg: 215 20.2% 65.1%;
  --border: 217.2 32.6% 17.5%;
  --accent: 193 32% 18%;
  --accent-fg: 192 50% 80%;
  --success: 142 71% 35%;
  --nav-bg: rgba(6, 10, 23, 0.85);
  --nav-border: rgba(255, 255, 255, 0.06);
  --hero-bg: linear-gradient(135deg, hsl(222 84% 5%) 0%, hsl(222 70% 7%) 50%, hsl(222 84% 5%) 100%);
  --hero-overlay: rgba(6, 10, 23, 0.5);
  --section-alt: hsl(222 60% 6%);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --card-hover-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  --integration-bg: hsl(222 50% 8%);
}