/* ============================================
   Work Out Timer — CSS Custom Properties
   v0.3
   ============================================ */

:root {
  /* --- Fonts --- */
  --font-display: 'Orbitron', monospace;
  --font-body: 'Rajdhani', sans-serif;
  --font-ui: 'Inter', sans-serif;

  /* --- Core Colours --- */
  --color-bg: #0a0a0f;
  --color-bg-card: #14141e;
  --color-bg-card-hover: #1c1c2a;
  --color-bg-elevated: #1a1a28;
  --color-surface: #1e1e2e;
  --color-border: #2a2a3e;
  --color-border-light: #3a3a4e;

  /* --- Text --- */
  --color-text-primary: #f0f0f5;
  --color-text-secondary: #8888a0;
  --color-text-muted: #555570;

  /* --- Accent --- */
  --color-accent: #FF1744;
  --color-accent-hover: #ff4560;
  --color-accent-dim: rgba(255, 23, 68, 0.15);

  /* --- Status --- */
  --color-success: #00e676;
  --color-warning: #ffab00;
  --color-danger: #ff1744;

  /* --- Timer Colours (defaults, overridable) --- */
  --timer-work-colour: #FF1744;
  --timer-rest-colour: #2979FF;
  --timer-warmup-colour: #00E676;
  --timer-cooldown-colour: #FF9100;

  /* --- Pause --- */
  --color-pause-bg: rgba(200, 200, 200, 0.85);

  /* --- Spacing --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* --- Border Radius --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 50%;

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* --- Shadows --- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(255, 23, 68, 0.3);
}