@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark;
  --radius: 0.75rem;

  --background: oklch(0.145 0.012 240);
  --foreground: oklch(0.985 0.005 200);

  --card: oklch(0.19 0.014 235);
  --card-foreground: oklch(0.985 0.005 200);

  --popover: oklch(0.19 0.014 235);
  --popover-foreground: oklch(0.985 0.005 200);

  --primary: oklch(0.72 0.13 195);
  --primary-foreground: oklch(0.16 0.02 235);

  --secondary: oklch(0.27 0.018 235);
  --secondary-foreground: oklch(0.97 0.005 200);

  --muted: oklch(0.24 0.014 235);
  --muted-foreground: oklch(0.7 0.018 220);

  --accent: oklch(0.32 0.05 195);
  --accent-foreground: oklch(0.97 0.005 200);

  --destructive: oklch(0.65 0.22 25);
  --destructive-foreground: oklch(0.985 0.005 200);

  --success: oklch(0.72 0.17 150);
  --success-foreground: oklch(0.14 0.02 150);

  --warning: oklch(0.78 0.15 75);
  --warning-foreground: oklch(0.18 0.02 75);

  --border: oklch(0.28 0.014 235 / 0.6);
  --input: oklch(0.28 0.014 235);
  --ring: oklch(0.72 0.13 195);

  --chart-1: oklch(0.72 0.13 195);
  --chart-2: oklch(0.72 0.17 150);
  --chart-3: oklch(0.78 0.15 75);
  --chart-4: oklch(0.7 0.18 320);
  --chart-5: oklch(0.65 0.22 25);

  --sidebar: oklch(0.165 0.012 240);
  --sidebar-foreground: oklch(0.985 0.005 200);
  --sidebar-primary: oklch(0.72 0.13 195);
  --sidebar-primary-foreground: oklch(0.16 0.02 235);
  --sidebar-accent: oklch(0.24 0.014 235);
  --sidebar-accent-foreground: oklch(0.985 0.005 200);
  --sidebar-border: oklch(0.28 0.014 235 / 0.6);
  --sidebar-ring: oklch(0.72 0.13 195);
}

@layer base {
  * {
    @apply border-border;
  }
  html, body {
    height: 100%;
  }
  body {
    background:
      radial-gradient(1200px 600px at 10% -10%, oklch(0.25 0.06 195 / 0.18), transparent 60%),
      radial-gradient(900px 500px at 110% 10%, oklch(0.22 0.08 280 / 0.14), transparent 55%),
      var(--background);
    color: var(--foreground);
    font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .tabular { font-variant-numeric: tabular-nums; }
  input, select, textarea {
    color: var(--foreground);
    color-scheme: dark;
  }
  input::placeholder, textarea::placeholder {
    color: var(--muted-foreground);
  }
  select option {
    background-color: var(--card);
    color: var(--foreground);
  }
  .glass {
    background: color-mix(in oklch, var(--card) 70%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in oklch, var(--border) 100%, transparent);
  }
}
