/* Slack-inspired enterprise SaaS tokens. HTML/JS stay untouched. */
:root {
  --sidebar-bg: #3F0E40;
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-active: rgba(255, 255, 255, 0.16);
  --sidebar-text: #D1D2D3;
  --sidebar-text-active: #FFFFFF;
  --sidebar-border: rgba(255, 255, 255, 0.1);

  --body-bg: #F8F9FA;
  --surface-bg: #FFFFFF;
  --surface-border: #E8ECEF;
  --text-primary: #1D1C1D;
  --text-secondary: #616061;
  --text-muted: #868686;

  --brand-primary: #4F46E5;
  --brand-primary-hover: #4338CA;
  --brand-secondary: #4F46E5;

  --color-danger: #E01E5A;
  --color-danger-bg: #FCE8EC;
  --color-warning: #ECB22E;
  --color-warning-bg: #FEF7E6;
  --color-success: #2BAC76;
  --color-success-bg: #E8F7F0;
  --color-info: #4A154B;
  --color-info-bg: #F5EEF7;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body {
  color: var(--text-primary);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Canvas: Tailwind slate canvas/text loses to the SaaS tokens. */
.bg-slate-100 { background-color: var(--body-bg) !important; }
.text-slate-900 { color: var(--text-primary) !important; }
.text-slate-800 { color: var(--text-primary) !important; }
.text-slate-700,
.text-slate-600 { color: var(--text-secondary) !important; }
.text-slate-500,
.text-slate-400 { color: var(--text-muted) !important; }
.border-slate-200,
.border-slate-300 { border-color: var(--surface-border) !important; }

.bg-white.rounded-2xl,
.bg-white.rounded-xl,
.bg-white.rounded-lg {
  background-color: var(--surface-bg) !important;
  border-color: var(--surface-border) !important;
  box-shadow: var(--shadow-card);
}

.rounded-2xl { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-sm) !important; }

/* Primary actions: indigo (see theme.css). Keep success soft badges only. */
.bg-blue-600,
.bg-blue-700,
.bg-emerald-600,
.bg-emerald-700 {
  background-color: var(--brand-primary) !important;
}
.hover\:bg-blue-500:hover,
.hover\:bg-blue-600:hover,
.bg-blue-600:hover,
.bg-blue-700:hover,
.bg-emerald-700:hover {
  background-color: var(--brand-primary-hover) !important;
}
.text-blue-600,
.text-blue-700 {
  color: var(--brand-secondary) !important;
}
.focus\:ring-blue-500:focus,
.focus\:ring-blue-600:focus {
  --tw-ring-color: var(--brand-secondary) !important;
}

.bg-rose-600,
.bg-rose-700 { background-color: var(--color-danger) !important; }
.bg-rose-50,
.bg-rose-100 { background-color: var(--color-danger-bg) !important; }
.text-rose-600,
.text-rose-700,
.text-rose-800 { color: var(--color-danger) !important; }
.bg-amber-50,
.bg-amber-100 { background-color: var(--color-warning-bg) !important; }
.text-amber-800,
.text-amber-900 { color: #8A6116 !important; }
.bg-emerald-50,
.bg-emerald-100 { background-color: var(--color-success-bg) !important; }
.text-emerald-700,
.text-emerald-800 { color: var(--color-success) !important; }

/* Sidebar shell — ID beats Tailwind bg-slate-900. */
#app-sidebar,
header.sticky.top-0 {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  border-color: var(--sidebar-border) !important;
}

#app-sidebar .border-slate-700,
#app-sidebar .border-t {
  border-color: var(--sidebar-border) !important;
}

#app-sidebar .text-slate-400,
#app-sidebar .text-slate-500 {
  color: rgba(209, 210, 211, 0.72) !important;
}

#btn-sidebar-toggle,
#btn-drawer-close,
#btn-drawer-open {
  color: var(--sidebar-text);
  border-radius: var(--radius-sm);
}
#btn-sidebar-toggle:hover,
#btn-drawer-close:hover,
#btn-drawer-open:hover {
  background: var(--sidebar-hover) !important;
}

.shell-link {
  color: var(--sidebar-text);
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.shell-link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-active);
}
.shell-link.is-active {
  background: var(--sidebar-active);
  color: var(--sidebar-text-active);
  font-weight: 700;
  box-shadow: inset 3px 0 0 #FFFFFF;
}

#btn-open-create.sidebar-cta-btn,
#fab-create {
  /* CTA glass styles live in theme.css; fab keeps indigo pill */
}
#fab-create {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-hover);
}
#fab-create:hover {
  background: var(--brand-primary-hover) !important;
}

.toast {
  background: var(--text-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
}

input,
select,
textarea {
  border-radius: var(--radius-sm);
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(18, 100, 163, 0.22);
  border-color: var(--brand-secondary);
}