@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Root Variables */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Playfair Display", serif;
  --font-cursive: "Dancing Script", cursive;

  /* Brand Colors */
  --color-primary: #0b8c9f;
  --color-secondary: #ff7a00;

  /* Dark Theme */
  --color-dark-bg: #020617;
  --color-dark-card: #0f172a;
  --color-dark-border: #1e293b;

  /* Slate Colors */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
}

/* Apply Base Styles */
body {
  font-family: var(--font-sans);
  background-color: var(--color-dark-bg);
  color: var(--color-slate-50);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-dark-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-dark-border);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Glass Card */
.glass-card {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-dark-border);
}