/* ── Light theme variables ─────────────────────────────────────── */
:root {
  --c-surface:                  #f7f9fb;
  --c-surface-dim:              #d8dadc;
  --c-surface-bright:           #f7f9fb;
  --c-surface-container-lowest: #ffffff;
  --c-surface-container-low:    #f2f4f6;
  --c-surface-container:        #eceef0;
  --c-surface-container-high:   #e6e8ea;
  --c-surface-container-highest:#e0e3e5;
  --c-surface-variant:          #e0e3e5;
  --c-surface-tint:             #565e74;
  --c-on-surface:               #191c1e;
  --c-on-surface-variant:       #45464d;
  --c-inverse-surface:          #2d3133;
  --c-inverse-on-surface:       #eff1f3;
  --c-outline:                  #76777d;
  --c-outline-variant:          #c6c6cd;
  --c-primary:                  #000000;
  --c-on-primary:               #ffffff;
  --c-primary-container:        #131b2e;
  --c-on-primary-container:     #7c839b;
  --c-primary-fixed:            #dae2fd;
  --c-primary-fixed-dim:        #bec6e0;
  --c-on-primary-fixed:         #131b2e;
  --c-on-primary-fixed-variant: #3f465c;
  --c-inverse-primary:          #bec6e0;
  --c-secondary:                #515f74;
  --c-on-secondary:             #ffffff;
  --c-secondary-container:      #d5e3fd;
  --c-on-secondary-container:   #57657b;
  --c-secondary-fixed:          #d5e3fd;
  --c-secondary-fixed-dim:      #b9c7e0;
  --c-on-secondary-fixed:       #0d1c2f;
  --c-on-secondary-fixed-variant:#3a485c;
  --c-tertiary:                 #000000;
  --c-on-tertiary:              #ffffff;
  --c-tertiary-container:       #001e2f;
  --c-on-tertiary-container:    #008cc7;
  --c-tertiary-fixed:           #c9e6ff;
  --c-tertiary-fixed-dim:       #89ceff;
  --c-on-tertiary-fixed:        #001e2f;
  --c-on-tertiary-fixed-variant:#004c6e;
  --c-error:                    #ba1a1a;
  --c-on-error:                 #ffffff;
  --c-error-container:          #ffdad6;
  --c-on-error-container:       #93000a;
  --c-background:               #f7f9fb;
  --c-on-background:            #191c1e;
}

/* ── Dark theme variables ──────────────────────────────────────── */
html.dark {
  --c-surface:                  #0f172a;
  --c-surface-dim:              #020617;
  --c-surface-bright:           #1e293b;
  --c-surface-container-lowest: #1e293b;
  --c-surface-container-low:    #0f172a;
  --c-surface-container:        #1e293b;
  --c-surface-container-high:   #334155;
  --c-surface-container-highest:#475569;
  --c-surface-variant:          #334155;
  --c-surface-tint:             #475569;
  --c-on-surface:               #f8fafc;
  --c-on-surface-variant:       #94a3b8;
  --c-inverse-surface:          #e2e8f0;
  --c-inverse-on-surface:       #0f172a;
  --c-outline:                  #475569;
  --c-outline-variant:          #334155;
  --c-primary:                  #3b82f6;
  --c-on-primary:               #ffffff;
  --c-primary-container:        #1e40af;
  --c-on-primary-container:     #60a5fa;
  --c-primary-fixed:            #1e40af;
  --c-primary-fixed-dim:        #3b82f6;
  --c-on-primary-fixed:         #eff6ff;
  --c-on-primary-fixed-variant: #dbeafe;
  --c-inverse-primary:          #1d4ed8;
  --c-secondary:                #94a3b8;
  --c-on-secondary:             #ffffff;
  --c-secondary-container:      #334155;
  --c-on-secondary-container:   #e2e8f0;
  --c-secondary-fixed:          #1e293b;
  --c-secondary-fixed-dim:      #64748b;
  --c-on-secondary-fixed:       #f8fafc;
  --c-on-secondary-fixed-variant:#cbd5e1;
  --c-tertiary:                 #38bdf8;
  --c-on-tertiary:              #ffffff;
  --c-tertiary-container:       #38bdf8;
  --c-on-tertiary-container:    #38bdf8;
  --c-tertiary-fixed:           #0369a1;
  --c-tertiary-fixed-dim:       #0ea5e9;
  --c-on-tertiary-fixed:        #e0f2fe;
  --c-on-tertiary-fixed-variant:#bae6fd;
  --c-error:                    #f87171;
  --c-on-error:                 #ffffff;
  --c-error-container:          #7f1d1d;
  --c-on-error-container:       #fca5a5;
  --c-background:               #0f172a;
  --c-on-background:            #f8fafc;
}

/* ── Base ────────────────────────────────────────────────────────── */
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }

/* ── Ambient shadow ──────────────────────────────────────────────── */
.ambient-shadow {
  box-shadow: 0px 4px 24px rgba(0,0,0,0.04), 0px 1px 2px rgba(0,0,0,0.02);
}

/* ── Kanban drag ghost ───────────────────────────────────────────── */
.sortable-ghost { opacity: 0.4; }
.sortable-drag  { opacity: 0.9; }

/* ── Toast notifications ─────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 8px; z-index: 9999;
}
.toast {
  background: var(--c-inverse-surface);
  color: var(--c-inverse-on-surface);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: slideIn 0.2s ease;
  max-width: 320px;
}
.toast.success { border-left: 3px solid #22c55e; }
.toast.error   { border-left: 3px solid var(--c-error); }
@keyframes slideIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Modal ───────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--c-surface-container-lowest);
  border: 1px solid var(--c-outline-variant);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

/* ── Scrollbar (webkit) ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-outline-variant);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-outline); }

/* ── Theme transition ────────────────────────────────────────────── */
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: 200ms;
  transition-timing-function: ease;
}
/* Exclude transitions that feel sluggish */
.notransition, .notransition * { transition: none !important; }

/* ── Priority badges ─────────────────────────────────────────────── */
.badge-high   { background: var(--c-error-container);     color: var(--c-on-error-container); }
.badge-medium { background: var(--c-secondary-container); color: var(--c-on-secondary-container); }
.badge-low    { background: var(--c-surface-variant);     color: var(--c-on-surface-variant); }

/* ── Status indicators ───────────────────────────────────────────── */
.status-active { color: #10b981; }
.status-busy   { color: #f59e0b; }
.status-away   { color: var(--c-outline-variant); }