:root {
  /* backgrounds */
  --bg-chrome:    #0d0f18;
  --bg-content:   #111520;
  --bg-elevated:  #1e2130;
  --bg-overlay:   #1a1d27;

  /* borders */
  --border-subtle:  #1e2130;
  --border-default: #2d3142;
  --border-strong:  #4b5563;

  /* text */
  --text-primary:     #e5e7eb;
  --text-secondary:   #9ca3af;
  --text-muted:       #6b7280;
  --text-disabled:    #4b5563;
  --text-placeholder: #374151;

  /* accent */
  --accent:       #3b82f6;
  --accent-bg:    #1e3a5f;
  --accent-hover: #1d4ed8;

  /* status */
  --status-running: #3b82f6;
  --status-success: #4ade80;
  --status-error:   #f87171;
  --status-warning: #fb923c;
  --status-neutral: #6b7280;

  /* task row semantic backgrounds */
  --bg-task-success: #1a3a1a;
  --bg-task-error:   #2a1a1a;
  --bg-task-hover:   #1a1d27;

  /* overlay rgba — tokenized for theme support */
  --overlay-backdrop: rgba(0,0,0,0.45);
  --overlay-shadow:   rgba(0,0,0,0.65);
}

[data-theme="light"] {
  /* backgrounds */
  --bg-chrome:    #f5f0e8;
  --bg-content:   #fdfaf4;
  --bg-elevated:  #ede8df;
  --bg-overlay:   #e8e2d8;

  /* borders */
  --border-subtle:  #ddd8ce;
  --border-default: #c8c2b8;
  --border-strong:  #a89e92;

  /* text */
  --text-primary:     #1a1612;
  --text-secondary:   #5c5248;
  --text-muted:       #6e6560;
  --text-disabled:    #b0a89e;
  --text-placeholder: #c0b8ae;

  /* accent */
  --accent:       #2563eb;
  --accent-bg:    #dbeafe;
  --accent-hover: #1e40af;

  /* task row semantic backgrounds */
  --bg-task-success: #dcfce7;
  --bg-task-error:   #fee2e2;
  --bg-task-hover:   #ede8df;

  /* overlay rgba — warm brown for light theme */
  --overlay-backdrop: rgba(80,60,40,0.35);
  --overlay-shadow:   rgba(80,60,40,0.50);

  /* status — darker hues for WCAG 3:1 on cream background */
  --status-running: #1d4ed8;
  --status-success: #15803d;
  --status-error:   #b91c1c;
  --status-warning: #c2410c;
  --status-neutral: #57534e;
}

* { font-family: "Ubuntu Mono", monospace; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg-chrome); color: var(--text-primary); }

/* ── Status dots ── */
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.status-dot.running  { background: var(--status-running); }
.status-dot.success  { background: var(--status-success); }
.status-dot.failure,
.status-dot.failed   { background: var(--status-error); }
.status-dot.timeout  { background: var(--status-warning); }
.status-dot.cancelled{ background: var(--status-neutral); }

/* ── Animations ── */
@keyframes live-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.live-pulse { animation: live-pulse 1.4s ease-in-out infinite; }

/* ── Accessibility ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  /* Sidebar off-canvas drawer */
  #sidebar {
    position: fixed; left: 0; top: 0; height: 100%;
    z-index: 100;
    transform: translateX(-160px);
    transition: transform 0.22s ease;
  }
  #sidebar.sidebar-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px var(--overlay-shadow);
  }
  #sidebar-backdrop {
    display: none; position: fixed; inset: 0;
    background: var(--overlay-backdrop); z-index: 99; cursor: pointer;
  }
  #sidebar-backdrop.sidebar-open { display: block; }
  #hamburger-btn { display: flex !important; }

  /* Hub bottom sheet */
  #right-panel {
    top: auto !important; bottom: 52px !important;
    left: 0 !important; right: 0 !important;
    height: 85vh !important;
    border-left: none !important;
    border-top: 1px solid var(--border-default) !important;
    border-radius: 12px 12px 0 0 !important;
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #right-panel.sheet-open { transform: translateY(0); }
  #panel-backdrop {
    display: none; position: fixed; inset: 0;
    background: var(--overlay-backdrop); z-index: 48;
  }
  #panel-backdrop.panel-open { display: block; }
  #sheet-handle { display: flex !important; }

  /* Projects bottom sheet */
  #projects-sheet {
    top: auto !important; bottom: 52px !important;
    left: 0 !important; right: 0 !important;
    max-height: 65vh !important;
    border-top: 1px solid var(--border-default) !important;
    border-radius: 12px 12px 0 0 !important;
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #projects-sheet.sheet-open { transform: translateY(0); }
  #projects-backdrop {
    display: none; position: fixed; inset: 0;
    background: var(--overlay-backdrop); z-index: 48;
  }
  #projects-backdrop.panel-open { display: block; }

  /* Bottom nav */
  #bottom-nav { display: flex !important; }
  main { padding-bottom: 52px; }

  /* No L-chrome on mobile — sidebar is hidden */
  #content-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-top: none !important;
    background: var(--bg-chrome) !important;
  }
  #app-topbar { border-bottom: none; }
}

/* ── Desktop ── */
@media (min-width: 768px) {
  #sidebar { transform: none !important; }
  #sidebar-backdrop { display: none !important; }
  #hamburger-btn { display: none !important; }
  #sheet-handle { display: none !important; }
  #bottom-nav { display: none !important; }
  #panel-backdrop { display: none !important; }
}