/* frontend/css/theme.css */
/* CSS custom properties for light and dark mode */

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-card: #ffffff;
  --bg-input: #f0f0f0;

  --text-primary: #1a1a1a;
  --text-secondary: #555555;
  --text-muted: #888888;

  --accent: #5c6bc0;
  --accent-rgb: 92, 107, 192;
  --accent-hover: #3f51b5;
  --accent-text: #ffffff;

  --danger: #e53935;
  --success: #43a047;
  --warning: #fb8c00;

  --border: #e0e0e0;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  --radius: 10px;
  --radius-sm: 6px;

  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Ludo colors */
  --ludo-red: #E53935;
  --ludo-blue: #1E88E5;
  --ludo-green: #43A047;
  --ludo-yellow: #FDD835;
  --ludo-safe: #a5d6a7;
  --ludo-path: #fafafa;
  --ludo-center: #9c27b0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-card: #242424;
    --bg-input: #2a2a2a;

    --text-primary: #f0f0f0;
    --text-secondary: #aaaaaa;
    --text-muted: #666666;

    --accent: #7986cb;
    --accent-rgb: 121, 134, 203;
    --accent-hover: #9fa8da;
    --accent-text: #121212;

    --border: #333333;
    --shadow: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);

    --ludo-path: #1e1e1e;
  }
}

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

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { cursor: pointer; border: none; font-family: inherit; font-size: 1rem; }

input, textarea {
  font-family: inherit;
  font-size: 1rem;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  outline: none;
  transition: border-color 0.15s;
}
input:focus { border-color: var(--accent); }