/* design_system.css */
/* Vercel-inspired design system with clean, minimal aesthetics */

:root {
  color-scheme: light;
  
  /* Core Theme Colors */
  --color-primary: #0070f3;       /* Vercel Blue */
  --color-primary-hover: #0060df; /* Darker Blue */
  --color-accent: #0070f3;        /* Blue Accent */
  --color-accent-glow: rgba(0, 112, 243, 0.1);
  
  /* Semantic UI Variables */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --card-bg: #ffffff;
  --ink: #000000;
  --text-main: #000000;
  --text-dim: #666666;
  --muted-strong: #333333;
  --border: #eaeaea;
  
  /* Theme-specific Accent Semantics */
  --accent-cyan: #0070f3;
  --accent-emerald: #00a854;
  --gold: #f5a623;
  --danger: #ff0000;
  
  /* Layout and Effects */
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Font Stack */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  
  /* Core Theme Colors */
  --color-primary: #3291ff;       /* Lighter Blue for dark mode */
  --color-primary-hover: #0070f3; /* Standard Blue on hover */
  --color-accent: #3291ff;        /* Light Blue Accent */
  --color-accent-glow: rgba(50, 145, 255, 0.15);
  
  /* Semantic UI Variables */
  --bg: #000000;
  --surface: #111111;
  --surface-muted: #1a1a1a;
  --card-bg: #111111;
  --ink: #ffffff;
  --text-main: #ffffff;
  --text-dim: #888888;
  --muted-strong: #cccccc;
  --border: #333333;
  
  /* Theme-specific Accent Semantics */
  --accent-cyan: #3291ff;
  --accent-emerald: #00c853;
  --gold: #ffd700;
  --danger: #ff4d4d;
  
  /* Layout and Effects */
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Apply Font */
body {
  font-family: var(--font-sans) !important;
}
input, button, textarea, select {
  font-family: var(--font-sans) !important;
}