/**
 * theme.css
 * CSS custom properties (design tokens) for the entire application.
 * Load this before any other stylesheet.
 * Phase 1: Defines variables only — no visual change yet.
 * Phase 2: Individual stylesheets will migrate to use these variables.
 */
:root {
  /* Brand colours */
  --color-primary:        #ff6b35;
  --color-primary-hover:  #e65a2b;
  --color-secondary:      #26a69a;
  --color-secondary-hover:#229085;
  --color-accent:         #667eea;
  --color-accent-hover:   #5568d3;

  /* Semantic colours */
  --color-success:  #28a745;
  --color-danger:   #dc3545;
  --color-warning:  #ffc107;
  --color-info:     #2196F3;
  --color-muted:    #6c757d;

  /* Toast type colours */
  --toast-success-color: #4CAF50;
  --toast-error-color:   #f44336;
  --toast-warning-color: #ff9800;
  --toast-info-color:    #2196F3;

  /* Dark header / navbar */
  --header-bg:    rgba(0, 0, 0, 0.9);
  --header-text:  #ffffff;
  --header-hover: #ff6b35;

  /* Body */
  --font-family-base: 'Arial', sans-serif;
  --color-text:       #333333;
  --line-height-base: 1.6;

  /* Borders & radius */
  --border-color:    #dddddd;
  --radius-sm:       3px;
  --radius:          5px;
  --radius-lg:       8px;
  --radius-xl:       15px;
  --radius-pill:     20px;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 15px 50px rgba(0, 0, 0, 0.30);

  /* Transitions */
  --transition: 0.3s;

  /* Layout */
  --container-max-width-sm:  900px;
  --container-max-width-md:  1200px;
  --container-max-width-lg:  1400px;
}