// Shadcn-inspired color system with semantic tokens
// Based on HSL for easy dark mode transitions

:root {
  // Base colors (light mode)
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;

  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;

  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  // 🎨 Customize accent color for your brand (e.g., vibrant blue, purple, teal)
  --accent: 217 91% 60%;  // Vibrant blue - change this to match your brand
  --accent-foreground: 210 40% 98%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;

  --radius: 0.5rem;

  // Color scales - Slate (neutral gray)
  --slate-50: 210 40% 98%;
  --slate-100: 210 40% 96.1%;
  --slate-200: 214.3 31.8% 91.4%;
  --slate-300: 212.7 26.8% 83.9%;
  --slate-400: 215 20.2% 65.1%;
  --slate-500: 215.4 16.3% 46.9%;
  --slate-600: 215.3 19.3% 34.5%;
  --slate-700: 215.3 25% 26.7%;
  --slate-800: 217.2 32.6% 17.5%;
  --slate-900: 222.2 47.4% 11.2%;
  --slate-950: 229 84% 5%;

  // Success/Info/Warning
  --success: 142.1 76.2% 36.3%;
  --success-foreground: 210 40% 98%;

  --info: 221.2 83.2% 53.3%;
  --info-foreground: 210 40% 98%;

  --warning: 38 92% 50%;
  --warning-foreground: 222.2 47.4% 11.2%;

  // Special attention variants
  --golden: 43 74% 49%;
  --golden-foreground: 210 40% 98%;

  --attention: 45 93% 47%;
  --attention-foreground: 0 0% 0%;

  --attention-violet: 267 76% 57%;
  --attention-violet-foreground: 210 40% 98%;

  --attention-red: 0 84% 60%;
  --attention-red-foreground: 210 40% 98%;
}

/** @public Dark mode color scheme */
.dark,
[data-theme="dark"] {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;

  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;

  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;

  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;

  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;

  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;

  // 🎨 Customize accent color for your brand (dark mode version)
  --accent: 217 91% 70%;  // Lighter vibrant blue for dark mode - adjust to match light mode
  --accent-foreground: 222.2 84% 4.9%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 210 40% 98%;

  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;

  // Dark mode color scales
  --slate-50: 229 84% 5%;
  --slate-100: 222.2 47.4% 11.2%;
  --slate-200: 217.2 32.6% 17.5%;
  --slate-300: 215.3 25% 26.7%;
  --slate-400: 215.3 19.3% 34.5%;
  --slate-500: 215.4 16.3% 46.9%;
  --slate-600: 215 20.2% 65.1%;
  --slate-700: 212.7 26.8% 83.9%;
  --slate-800: 214.3 31.8% 91.4%;
  --slate-900: 210 40% 96.1%;
  --slate-950: 210 40% 98%;
}

/**
 * @section Background Colors
 */

/** @public Page background color */
.bg-background { background-color: hsl(var(--background)); }

/** @public Foreground as background (inverted) */
.bg-foreground { background-color: hsl(var(--foreground)); }

/** @public Card background */
.bg-card { background-color: hsl(var(--card)); }

/** @public Primary brand color background */
.bg-primary { background-color: hsl(var(--primary)); }

/** @public Secondary color background */
.bg-secondary { background-color: hsl(var(--secondary)); }

/** @public Muted/subtle background */
.bg-muted { background-color: hsl(var(--muted)); }

/** @public Accent brand color background */
.bg-accent { background-color: hsl(var(--accent)); }

/** @public Destructive/error background */
.bg-destructive { background-color: hsl(var(--destructive)); }

/** @public Success/positive background */
.bg-success { background-color: hsl(var(--success)); }

/** @public Info background */
.bg-info { background-color: hsl(var(--info)); }

/** @public Warning background */
.bg-warning { background-color: hsl(var(--warning)); }

/**
 * @section Text Colors
 */

/** @public Main text color */
.text-foreground { color: hsl(var(--foreground)); }

/** @public Primary brand color text */
.text-primary { color: hsl(var(--primary)); }

/** @public Secondary text color */
.text-secondary { color: hsl(var(--secondary-foreground)); }

/** @public Muted/subtle text */
.text-muted { color: hsl(var(--muted-foreground)); }

/** @public Accent brand color text */
.text-accent { color: hsl(var(--accent)); }

/** @public Destructive/error text */
.text-destructive { color: hsl(var(--destructive)); }

/** @public Success/positive text */
.text-success { color: hsl(var(--success)); }

/** @public Info text */
.text-info { color: hsl(var(--info)); }

/** @public Warning text */
.text-warning { color: hsl(var(--warning)); }

/**
 * @section Border Colors
 */

/** @public Default border color */
.border-default { border-color: hsl(var(--border)); }

/** @public Input border color */
.border-input { border-color: hsl(var(--input)); }

/** @public Primary border color */
.border-primary { border-color: hsl(var(--primary)); }

// v1 compatible utilities
/** @public Dark text - v1 compat */
.text-dark { color: hsl(var(--foreground)); }

/** @public Light text - v1 compat */
.text-light { color: hsl(var(--muted-foreground)); }

/** @public Dark background - v1 compat */
.bg-dark { background-color: hsl(var(--foreground)); }

/** @public Light background - v1 compat */
.bg-light { background-color: hsl(var(--background)); }

/**
 * @section Slate Scale (50-950)
 */

/** @public Slate 50 text - lightest */
.text-50 { color: hsl(var(--slate-50)); }

/** @public Slate 100 text */
.text-100 { color: hsl(var(--slate-100)); }

/** @public Slate 200 text */
.text-200 { color: hsl(var(--slate-200)); }

/** @public Slate 300 text */
.text-300 { color: hsl(var(--slate-300)); }

/** @public Slate 400 text */
.text-400 { color: hsl(var(--slate-400)); }

/** @public Slate 500 text - mid-tone */
.text-500 { color: hsl(var(--slate-500)); }

/** @public Slate 600 text */
.text-600 { color: hsl(var(--slate-600)); }

/** @public Slate 700 text */
.text-700 { color: hsl(var(--slate-700)); }

/** @public Slate 800 text */
.text-800 { color: hsl(var(--slate-800)); }

/** @public Slate 900 text */
.text-900 { color: hsl(var(--slate-900)); }

/** @public Slate 950 text - darkest */
.text-950 { color: hsl(var(--slate-950)); }

/** @public Slate 50 background - lightest */
.bg-50 { background-color: hsl(var(--slate-50)); }

/** @public Slate 100 background */
.bg-100 { background-color: hsl(var(--slate-100)); }

/** @public Slate 200 background */
.bg-200 { background-color: hsl(var(--slate-200)); }

/** @public Slate 300 background */
.bg-300 { background-color: hsl(var(--slate-300)); }

/** @public Slate 400 background */
.bg-400 { background-color: hsl(var(--slate-400)); }

/** @public Slate 500 background - mid-tone */
.bg-500 { background-color: hsl(var(--slate-500)); }

/** @public Slate 600 background */
.bg-600 { background-color: hsl(var(--slate-600)); }

/** @public Slate 700 background */
.bg-700 { background-color: hsl(var(--slate-700)); }

/** @public Slate 800 background */
.bg-800 { background-color: hsl(var(--slate-800)); }

/** @public Slate 900 background */
.bg-900 { background-color: hsl(var(--slate-900)); }

/** @public Slate 950 background - darkest */
.bg-950 { background-color: hsl(var(--slate-950)); }