:root {
  --is-dark: 0;

  /* === UnaZap Official Brand Colors === */
  /* Primary Green: #2fbf82 (light) / #34d399 (dark) */
  --primary: #2fbf82;
  --primary-hover: #28a873;
  --primary-text: #ffffff;
  --primary-soft: rgba(47, 191, 130, 0.10);
  --primary-medium: rgba(47, 191, 130, 0.18);
  --primary-strong: rgba(47, 191, 130, 0.25);

  /* Light theme surfaces */
  --bg: #f6f8fa;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.8);
  --card-bg: #ffffff;

  /* Text */
  --text: #111827;
  --text-secondary: #525866;
  --text-muted: #8891a5;

  /* Borders */
  --border: #e2e5eb;
  --border-soft: #eef0f4;

  /* Shadows */
  --shadow: 0 1px 3px rgba(17, 24, 39, 0.04), 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.06), 0 1px 4px rgba(17, 24, 39, 0.04);
  --shadow-lg: 0 12px 40px rgba(17, 24, 39, 0.08), 0 4px 12px rgba(17, 24, 39, 0.04);
  --shadow-glow: 0 0 20px rgba(47, 191, 130, 0.12);
  --focus-ring: 0 0 0 3px rgba(47, 191, 130, 0.2);

  /* Semantic colors (matching UnaZap) */
  --ok-bg: #ecfdf5;
  --ok-text: #16a34a;
  --fail-bg: #fef2f2;
  --fail-text: #dc4a3f;
  --pending-bg: #fffbeb;
  --pending-text: #d97706;
  --danger: #dc4a3f;

  /* Navigation (transparent glass) */
  --nav-bg: rgba(255, 255, 255, 0.88);
  --nav-border: rgba(0, 0, 0, 0.06);

  /* Card hover */
  --card-hover: rgba(47, 191, 130, 0.03);

  /* Hero gradient */
  --hero-gradient: linear-gradient(155deg, #f0fdf4 0%, #f6f8fa 40%, #ecfdf3 100%);

  /* Code blocks */
  --code-bg: #f1f3f7;

  /* Radius */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Transition */
  --transition: color .3s, background .3s, border-color .3s, box-shadow .3s, opacity .3s;

  /* Sidebar (always dark in UnaZap) - not used in landing but kept for consistency */
  --sidebar-bg: #0f1219;
  --sidebar-bg-soft: #141822;
  --sidebar-text: #94a3b8;
  --sidebar-text-active: #f1f5f9;
  --sidebar-active-bg: rgba(47, 191, 130, 0.12);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-accent: #2fbf82;
}

/* Dark theme - matching UnaZap exactly */
[data-theme="dark"] {
  --is-dark: 1;

  /* Primary - lighter green for dark mode */
  --primary: #34d399;
  --primary-hover: #4ade80;
  --primary-text: #052e16;
  --primary-soft: rgba(52, 211, 153, 0.10);
  --primary-medium: rgba(52, 211, 153, 0.16);
  --primary-strong: rgba(52, 211, 153, 0.25);

  /* Dark surfaces */
  --bg: #0c0f14;
  --bg-alt: #151921;
  --surface: #151921;
  --surface-soft: rgba(21, 25, 33, 0.8);
  --card-bg: #151921;

  /* Text */
  --text: #f1f5f9;
  --text-secondary: #a0a8b8;
  --text-muted: #6b7280;

  /* Borders */
  --border: #1e293b;
  --border-soft: #172030;

  /* Shadows */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 20px rgba(52, 211, 153, 0.15);
  --focus-ring: 0 0 0 3px rgba(52, 211, 153, 0.25);

  /* Semantic */
  --ok-bg: rgba(34, 197, 94, 0.1);
  --ok-text: #4ade80;
  --fail-bg: rgba(239, 68, 68, 0.1);
  --fail-text: #f87171;
  --pending-bg: rgba(245, 158, 11, 0.1);
  --pending-text: #fbbf24;
  --danger: #f87171;

  /* Navigation */
  --nav-bg: rgba(12, 15, 20, 0.88);
  --nav-border: rgba(255, 255, 255, 0.06);

  /* Card hover */
  --card-hover: rgba(52, 211, 153, 0.04);

  /* Hero gradient */
  --hero-gradient: linear-gradient(155deg, #0c1a14 0%, #0c0f14 40%, #0d1218 100%);

  /* Code */
  --code-bg: #151921;
}

/* Sidebar / KPI dark tokens (from UnaZap) - for reference */
:root {
  --kpi-dark-bg: #0f1219;
  --kpi-dark-text: #f1f5f9;
  --kpi-dark-muted: #94a3b8;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: none;
  }
}