/* ========================================
   SHADCN-INSPIRED DESIGN TOKENS
   Mapped to dutaintegra brand palette
   ======================================== */

:root {
  /* === shadcn core tokens (adapted) === */
  --background: 210 40% 98%;          /* #f8fafc */
  --foreground: 222 47% 11%;          /* #0f172a */
  --card: 0 0% 100%;                  /* #ffffff */
  --card-foreground: 222 47% 11%;     /* #0f172a */
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 200 100% 41%;            /* #00b4ff (electric blue) */
  --primary-foreground: 222 47% 11%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 210 40% 96%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 214 32% 91%;              /* #e2e8f0 */
  --input: 214 32% 91%;
  --ring: 200 100% 41%;

  /* === dutaintegra brand tokens (extended) === */
  --brand-navy: #0B1D3A;
  --brand-blue: #1565C0;
  --brand-electric: #00B4FF;
  --brand-white: #F8FAFF;
  --brand-gray: #8A9BB5;
  --brand-dark: #060F1F;

  /* === spacing scale === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* === radius === */
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* === shadow === */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);

  /* === typography === */
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* === transition === */
  --transition-fast: 150ms cubic-bezier(.4,0,.2,1);
  --transition-base: 200ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 300ms cubic-bezier(.4,0,.2,1);
}

/* === Dark mode shadcn tokens === */
body.dark-mode {
  --background: 222 47% 6%;           /* #0a0f1d */
  --foreground: 210 40% 98%;
  --card: 222 47% 11%;                /* #1a2744 */
  --card-foreground: 210 40% 98%;
  --popover: 222 47% 11%;
  --popover-foreground: 210 40% 98%;
  --primary: 200 100% 41%;
  --primary-foreground: 222 47% 6%;
  --secondary: 217 33% 17%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;
  --accent: 217 33% 17%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 210 40% 98%;
  --border: 217 33% 17%;
  --input: 217 33% 17%;
  --ring: 200 100% 41%;
}

/* === shadcn-style utility classes === */
.shadcn-card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.shadcn-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: hsl(var(--ring));
}

.shadcn-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.15rem 0.65rem;
  font-size: var(--text-xs);
  font-weight: 600;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 1px solid hsl(var(--border));
}
.shadcn-badge.primary {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.2);
}

.shadcn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  text-decoration: none;
}
.shadcn-btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.shadcn-btn-primary:hover {
  opacity: 0.9;
}
.shadcn-btn-outline {
  background: transparent;
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
.shadcn-btn-outline:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.shadcn-btn-ghost {
  background: transparent;
  color: hsl(var(--foreground));
}
.shadcn-btn-ghost:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.shadcn-separator {
  height: 1px;
  background: hsl(var(--border));
  width: 100%;
}

/* === legacy variable overrides (backward compat) === */
:root {
  --navy: var(--brand-navy);
  --blue: var(--brand-blue);
  --electric: var(--brand-electric);
  --white: var(--brand-white);
  --gray: var(--brand-gray);
  --dark: var(--brand-dark);
}