@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";
@custom-variant dark (&:is(.dark *));

@theme {
  --color-background: oklch(0.98 0.01 var(--theme-hue, 145));
  --color-foreground: oklch(0.15 0.02 var(--theme-hue, 145));
  --color-card: oklch(1 0 0);
  --color-card-foreground: oklch(0.15 0.02 var(--theme-hue, 145));
  --color-popover: oklch(1 0 0);
  --color-popover-foreground: oklch(0.15 0.02 var(--theme-hue, 145));
  --color-primary: oklch(var(--theme-l, 0.55) var(--theme-c, 0.12) var(--theme-hue, 145));
  --color-primary-foreground: oklch(1 0 0);
  --color-secondary: oklch(0.96 0.01 var(--theme-hue, 145));
  --color-secondary-foreground: oklch(0.35 0.08 var(--theme-hue, 145));
  --color-muted: oklch(0.96 0.01 var(--theme-hue, 145));
  --color-muted-foreground: oklch(0.55 0.02 var(--theme-hue, 145));
  --color-accent: oklch(0.96 0.01 var(--theme-hue, 145));
  --color-accent-foreground: oklch(0.35 0.08 var(--theme-hue, 145));
  --color-destructive: oklch(0.58 0.18 25);
  --color-destructive-foreground: oklch(1 0 0);
  --color-border: oklch(0.92 0.01 var(--theme-hue, 145));
  --color-input: oklch(0.92 0.01 var(--theme-hue, 145));
  --color-ring: oklch(var(--theme-l, 0.55) var(--theme-c, 0.12) var(--theme-hue, 145));

  --color-sidebar-background: oklch(0.985 0.005 var(--theme-hue, 145) / 0.8);
  --color-sidebar-foreground: oklch(0.30 0.02 var(--theme-hue, 145));
  --color-sidebar-primary: oklch(var(--theme-l, 0.55) var(--theme-c, 0.12) var(--theme-hue, 145));
  --color-sidebar-primary-foreground: oklch(0.99 0 0);
  --color-sidebar-accent: oklch(0.95 0.02 var(--theme-hue, 145));
  --color-sidebar-accent-foreground: oklch(0.35 0.08 var(--theme-hue, 145));
  --color-sidebar-border: oklch(0.90 0.01 var(--theme-hue, 145) / 0.3);
  --color-sidebar-ring: oklch(var(--theme-l, 0.55) var(--theme-c, 0.12) var(--theme-hue, 145));

  --radius-lg: 1.5rem;
  --radius-md: 1rem;
  --radius-sm: 0.6rem;

  --shadow-soft: 0 4px 20px -2px oklch(0 0 0 / 0.05), 0 0 3px oklch(0 0 0 / 0.02);
  --shadow-soft-lg: 0 10px 40px -4px oklch(0 0 0 / 0.08), 0 0 4px oklch(0 0 0 / 0.03);
}

:root.dark {
  --color-background: oklch(0.18 0.02 var(--theme-hue, 145));
  --color-foreground: oklch(0.96 0.01 var(--theme-hue, 145));
  --color-card: oklch(0.22 0.02 var(--theme-hue, 145));
  --color-card-foreground: oklch(0.96 0.01 var(--theme-hue, 145));
  --color-popover: oklch(0.22 0.02 var(--theme-hue, 145));
  --color-popover-foreground: oklch(0.96 0.01 var(--theme-hue, 145));
  --color-primary: oklch(var(--theme-l-dark, 0.65) var(--theme-c-dark, 0.15) var(--theme-hue, 145));
  --color-primary-foreground: oklch(0.12 0.02 var(--theme-hue, 145));
  --color-secondary: oklch(0.28 0.03 var(--theme-hue, 145));
  --color-secondary-foreground: oklch(0.92 0.02 var(--theme-hue, 145));
  --color-muted: oklch(0.25 0.02 var(--theme-hue, 145));
  --color-muted-foreground: oklch(0.70 0.02 var(--theme-hue, 145));
  --color-accent: oklch(0.28 0.03 var(--theme-hue, 145));
  --color-accent-foreground: oklch(0.92 0.02 var(--theme-hue, 145));
  --color-destructive: oklch(0.58 0.18 25);
  --color-destructive-foreground: oklch(0.99 0 0);
  --color-border: oklch(0.32 0.03 var(--theme-hue, 145));
  --color-input: oklch(0.32 0.03 var(--theme-hue, 145));
  --color-ring: oklch(var(--theme-l-dark, 0.65) var(--theme-c-dark, 0.15) var(--theme-hue, 145));

  --color-sidebar-background: oklch(0.16 0.02 var(--theme-hue, 145) / 0.8);
  --color-sidebar-foreground: oklch(0.85 0.02 var(--theme-hue, 145));
  --color-sidebar-primary: oklch(var(--theme-l-dark, 0.65) var(--theme-c-dark, 0.15) var(--theme-hue, 145));
  --color-sidebar-primary-foreground: oklch(0.12 0.02 var(--theme-hue, 145));
  --color-sidebar-accent: oklch(0.28 0.03 var(--theme-hue, 145));
  --color-sidebar-accent-foreground: oklch(0.92 0.02 var(--theme-hue, 145));
  --color-sidebar-border: oklch(0.32 0.03 var(--theme-hue, 145) / 0.3);
  --color-sidebar-ring: oklch(var(--theme-l-dark, 0.65) var(--theme-c-dark, 0.15) var(--theme-hue, 145));
}

* {
  @apply border-border;
}

html {
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  @apply bg-background text-foreground;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.015em;
  background-image:
    radial-gradient(circle at 15% 50%, oklch(0.55 0.12 var(--theme-hue, 145) / 0.05), transparent 25%),
    radial-gradient(circle at 85% 30%, oklch(0.65 0.15 var(--theme-hue, 145) / 0.06), transparent 25%);
  background-attachment: fixed;
}

:root.dark body {
  background-image:
    radial-gradient(circle at 15% 50%, oklch(0.55 0.12 var(--theme-hue, 145) / 0.15), transparent 25%),
    radial-gradient(circle at 85% 30%, oklch(0.65 0.15 var(--theme-hue, 145) / 0.15), transparent 25%);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(0.75 0 0 / 0.3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: oklch(0.6 0 0 / 0.5); }

/* Focus */
:focus-visible {
  @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.animate-fadeIn { animation: fadeIn 0.2s ease-out; }
.animate-slideIn { animation: slideIn 0.2s ease-out; }
.animate-fade-in-up { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Card & Table enhancements */
.card-hover { @apply transition-all duration-200; }
.card-hover:hover { @apply shadow-md; transform: translateY(-1px); }
tr { @apply transition-colors duration-150; }
button { @apply transition-all duration-150; }
button:active:not(:disabled) { transform: scale(0.97); }
input:focus, textarea:focus, select:focus { @apply transition-shadow duration-150; }

/* Status colors */
.status-success { @apply bg-emerald-500/10 text-emerald-600; }
.status-warning { @apply bg-amber-500/10 text-amber-600; }
.status-error { @apply bg-red-500/10 text-red-600; }
.status-info { @apply bg-blue-500/10 text-blue-600; }

/* Gradients */
.gradient-primary { background: linear-gradient(135deg, oklch(0.52 0.14 150), oklch(0.58 0.12 160)); }

/* Glassmorphism */
.glass-panel { @apply bg-background/60 backdrop-blur-2xl border-white/40 dark:border-white/10 shadow-soft; }
.glass-card { @apply bg-card/80 backdrop-blur-xl border border-white/60 dark:border-white/10 shadow-soft transition-all duration-300; }
.glass-card:hover { @apply shadow-soft-lg -translate-y-1 bg-card/90 border-white/80 dark:border-white/20; }

/* Skeleton */
.skeleton { @apply bg-muted animate-pulse rounded; }

/* Scrollbar hide */
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
