@import "tailwindcss" source(none);
@source "../src";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
}

:root {
  --app-bg-gradient:
    radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.08), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.08), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.03), transparent 60%);

  --radius: 0.85rem;

  --background: #f8fafc;
  --foreground: #0f172a;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;

  --primary: #10b981;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #f59e0b;
  --accent-foreground: #000000;

  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --success: #10b981;
  --success-foreground: #ffffff;
  --warning: #f59e0b;
  --warning-foreground: #000000;

  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #10b981;

  --chart-1: #10b981;
  --chart-2: #06b6d4;
  --chart-3: #f59e0b;
  --chart-4: #8b5cf6;
  --chart-5: #ec4899;

  --glass: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow-lift: 0 12px 28px -6px rgba(15, 23, 42, 0.12);
  --gradient-primary: linear-gradient(135deg, #10b981, #0d9488);
  --gradient-accent: linear-gradient(135deg, #f59e0b, #ea580c);
}

.dark {
  --app-bg-gradient:
    radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.12), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(6, 182, 212, 0.1), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.04), transparent 60%);

  --background: #0a0a0d;
  --foreground: #f4f4f5;
  --surface: #121216;
  --surface-2: #18181c;
  --card: #121216;
  --card-foreground: #f4f4f5;
  --popover: #18181c;
  --popover-foreground: #f4f4f5;

  --primary: #10b981;
  --primary-foreground: #000000;
  --secondary: #18181b;
  --secondary-foreground: #f4f4f5;
  --muted: #18181b;
  --muted-foreground: #a1a1aa;
  --accent: #f59e0b;
  --accent-foreground: #000000;

  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --success: #10b981;
  --success-foreground: #000000;
  --warning: #f59e0b;
  --warning-foreground: #000000;

  --border: rgba(255, 255, 255, 0.1);
  --input: rgba(255, 255, 255, 0.12);
  --ring: #10b981;

  --chart-1: #10b981;
  --chart-2: #06b6d4;
  --chart-3: #f59e0b;
  --chart-4: #8b5cf6;
  --chart-5: #ec4899;

  --glass: rgba(18, 18, 21, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 12px 32px -8px rgba(0, 0, 0, 0.8);
  --gradient-primary: linear-gradient(135deg, #10b981, #059669);
  --gradient-accent: linear-gradient(135deg, #f59e0b, #d97706);
}

@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    font-weight: 400;
    overflow-x: hidden;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
  }
  button,
  a {
    touch-action: manipulation;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

@utility glass-panel {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(160%);
  border-color: var(--glass-border);
}

@utility surface-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
}

@utility press {
  transition:
    transform 120ms ease,
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
  &:active {
    transform: scale(0.965);
  }
}

@utility gradient-primary {
  background-image: var(--gradient-primary);
}

@utility gradient-accent {
  background-image: var(--gradient-accent);
}

@utility no-scrollbar {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@utility animate-rise {
  animation: rise-in 300ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes drawer-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@utility animate-drawer {
  animation: drawer-slide 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Glassmorphism helpers */
.glass {
  @apply bg-background/70 backdrop-blur-xl border-border/50;
}
.glass-panel {
  @apply bg-background/85 backdrop-blur-2xl border-border/60;
}
.glass-card {
  @apply bg-card/80 backdrop-blur-lg border-border/50 shadow-sm;
}