variables.css

/* WorkersPanel CSS Variables - Orange & Charcoal Theme */

/* Dark Mode (Default) - Deep Charcoal & Vibrant Orange */
:root {
  /* Charcoal Backgrounds - Nearly Black */
  --bg-main: #0f0f0f;        /* Main background - nearly black */
  --bg-panel: #1a1a1a;       /* Panels - dark charcoal */
  --bg-card: #242424;        /* Cards - charcoal */
  --bg-hover: #2d2d2d;       /* Hover state */

  /* Text Colors */
  --text-main: #f5f5f5;      /* Bright text for contrast */
  --text-muted: #8a8a8a;     /* Muted text */

  /* Vibrant Orange Accents */
  --accent: #ff8c1a;         /* Vibrant orange */
  --accent-hover: #ff9f3d;   /* Lighter orange on hover */
  --accent-soft: rgba(255,140,26,0.15);  /* Soft orange background */

  /* UI Elements */
  --border: #2d2d2d;         /* Dark borders */
  --danger: #ef4444;         /* Red for errors */
  --success: #10b981;        /* Green for success */
  --warning: #f59e0b;        /* Amber for warnings */

  /* Layout heights (used for sticky header + subnav stacking) */
  --topbar-h: 60px;
  --subnav-h: 48px;
}

/* Light Mode (if needed) */
[data-theme="light"] {
  --bg-main: #ffffff;
  --bg-panel: #f5f5f5;
  --bg-card: #fafafa;
  --bg-hover: #e8e8e8;

  --text-main: #1a1a1a;
  --text-muted: #666666;

  --accent: #ff8c1a;
  --accent-hover: #e67e13;
  --accent-soft: rgba(255,140,26,0.1);

  --border: #e0e0e0;
  --danger: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;
}