input.css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-primary: #2563eb;           /* blue-600 */
  --color-secondary: #475569;         /* slate-600 */
  --color-back: #f1f5f9;              /* slate-50 */
  --color-surface: #f8fafc;           /* white */
  --color-surface-elevated: #ffffff;  /* slate-100 */
  --color-border: #e2e8f0;            /* slate-200 */
  --color-text: #1e293b;              /* slate-800 */
  --color-text-muted: #64748b;        /* slate-500 */
  --color-success: #16a34a;           /* green-600 */
  --color-error: #dc2626;             /* red-600 */
}

.dark {
  --color-primary: #f97316;           /* orange-500 */
  --color-secondary: #fdba74;         /* orange-300 */
  --color-back: #0f172a;              /* slate-900 */
  --color-surface: #1e293b;           /* slate-800 */
  --color-surface-elevated: #334155;  /* slate-700 */
  --color-border: #475569;            /* slate-600 */
  --color-text: #f8fafc;              /* slate-50 */
  --color-text-muted: #cbd5e1;        /* slate-300 */
  --color-success: #22c55e;           /* green-500 */
  --color-error: #f87171;             /* red-400 */
}