/* Train Widget Color Scheme - Reusable Variables */
:root {
  /* Primary Colors */
  --bg-primary: #1F2739;
  --bg-secondary: #2C3446;
  --bg-tertiary: #2e3548;
  --bg-quaternary: #3e4659;
  --bg-hover: #383f52;

  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #b2b2b2;
  --text-label: #aaa;

  /* Accent Colors */
  --accent-blue: #4DC3FA;
  --accent-blue-dark: #0057e7;
  --accent-blue-darker: #0040b3;
  
  /* Brand Colors (can be customized per project) */
  --brand-orange: #ff8000;

  /* Status Colors */
  --success-green: #28a745;
  --error-red: #dc3545;
  --warning-yellow: #ffc107;
  --info-blue: var(--accent-blue);

  /* Border & Shadow */
  --border-color: #444;
  --border-light: #555;
  --border-accent: var(--accent-blue);
  --shadow-light: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 -2px 10px rgba(0, 0, 0, 0.2);

  /* Effects */
  --drop-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  
  /* Common transition timing */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Usage Examples:
body {
  background-color: var(--bg-primary);
  color: var(--text-secondary);
}

.container {
  background-color: var(--bg-secondary);
  box-shadow: var(--shadow-medium);
}

.accent-link {
  color: var(--accent-blue);
}
*/