/**
 * Emerald Theme - Primary Theme
 * Professional teal/emerald color scheme (not common blue)
 * Usage: Import after design-system.css
 */

:root {
  /* Primary Brand Colors */
  --primary: 158 64% 52%;        /* Emerald-500 */
  --primary-hover: 158 64% 44%;  /* Emerald-600 */
  --primary-light: 158 64% 90%;  /* Emerald-50 */
  --primary-dark: 158 64% 20%;   /* Emerald-900 */

  /* Secondary Accent */
  --secondary: 174 72% 56%;      /* Teal-400 */
  --secondary-hover: 174 72% 48%;

  /* Semantic Colors */
  --success: 142 71% 45%;        /* Green-600 */
  --warning: 38 92% 50%;         /* Amber-500 */
  --error: 0 84% 60%;            /* Red-500 */
  --info: 199 89% 48%;           /* Light Blue-500 */

  /* Background Colors */
  --background: 0 0% 100%;       /* White */
  --background-secondary: 158 60% 98%; /* Emerald-tinted white */
  --surface: 0 0% 100%;
  --surface-hover: 158 30% 97%;

  /* Text Colors */
  --text-primary: 222 47% 11%;   /* Slate-900 */
  --text-secondary: 215 20% 40%; /* Slate-600 */
  --text-tertiary: 215 16% 60%;  /* Slate-400 */
  --text-on-primary: 0 0% 100%;  /* White text on emerald */

  /* Border Colors */
  --border: 214 32% 91%;         /* Slate-200 */
  --border-hover: 158 64% 80%;   /* Emerald-200 */
  --border-focus: 158 64% 52%;   /* Primary */

  /* Component-Specific */
  --card-bg: 0 0% 100%;
  --card-border: 214 32% 91%;
  --input-bg: 0 0% 100%;
  --input-border: 214 32% 91%;
  --button-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

/* Dark mode handled by dark.css with [data-theme="dark"] selector */