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

@layer base {
  :root {
    --color-primary: #3B82F6;
    --color-secondary: #8B5CF6;
    --color-background: #F3F4F6;
    --color-card: #FFFFFF;
    --color-text: #111827;
    --color-text-secondary: #4B5563;
    --color-border: #E5E7EB;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --radius-card: 12px;
    --radius-button: 8px;
    --radius-input: 6px;

    --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 滚动条美化 */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    background: var(--color-border);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--color-text-secondary);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
  }
}