@import "tailwindcss";

@theme {
  --color-bg: #FAFAF8;
  --color-surface: #FFFFFF;
  --color-sidebar: #FFFFFF;
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-border: rgba(0,0,0,0.06);
  --color-primary: #2563EB;
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: rgba(37, 99, 235, 0.08);
  --color-success-light: rgba(22, 163, 74, 0.08);
  --color-warning-light: rgba(217, 119, 6, 0.08);
  --color-danger-light: rgba(220, 38, 38, 0.08);

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --radius-card: 20px;
  --radius-button: 14px;
  --radius-input: 14px;
  --radius-dropdown: 18px;

  --shadow-card: 0 2px 10px rgba(0,0,0,0.04);
  --shadow-dropdown: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-hover: 0 4px 16px rgba(0,0,0,0.06);
}

@layer base {
  html {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background-color: var(--color-bg);
    min-height: 100vh;
  }

  * {
    border-color: var(--color-border);
  }
}

@layer utilities {
  .card-shadow {
    box-shadow: var(--shadow-card);
  }

  .dropdown-shadow {
    box-shadow: var(--shadow-dropdown);
  }

  .hover-shadow {
    box-shadow: var(--shadow-hover);
  }
}