/* Planity light-theme palette, sourced from planity-frontend/src/styles/globals.css. */
:root {
  --ink: #2a2a4a;
  --muted: #6c6c8a;
  --accent: #500adc;
  --line: #e0e0f0;
  --bg: #f5f5ff;
  --brand-primary-hover: #3a0a9e;
  --brand-on-primary: #ffffff;
  --brand-secondary: #e5d9ff;
  --brand-on-secondary: #3a0a9e;
  --brand-secondary-hover: #ddd5ff;
  --brand-on-secondary-hover: #2e0878;
  --brand-sidebar: #f0f0fa;
}

button, .button {
  background: var(--accent);
  color: var(--brand-on-primary);
}

button:hover, .button:hover, button:active, .button:active {
  background: var(--brand-primary-hover);
  color: var(--brand-on-primary);
}

.secondary {
  background: var(--brand-secondary);
  color: var(--brand-on-secondary);
}

.secondary:hover, button.secondary:hover, .button.secondary:hover,
.secondary:active, button.secondary:active, .button.secondary:active {
  background: var(--brand-secondary-hover);
  color: var(--brand-on-secondary-hover);
}

.link-button, .link-button:hover, .link-button:active {
  background: transparent;
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

input:focus, textarea:focus, select:focus {
  outline-color: var(--accent);
}

.sidebar {
  background: var(--brand-sidebar);
  color: var(--ink);
  border-right: 1px solid var(--line);
}

.brand { display: block; padding: 0 10px; letter-spacing: normal; }
.brand img { display: block; width: 170px; height: auto; }
.brand span { color: var(--muted); margin-top: 12px; }
.nav-label { color: var(--muted); }
.sidebar nav a { color: var(--ink); }
.sidebar nav a[aria-current=page] {
  background: var(--brand-secondary);
  color: var(--brand-on-secondary);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.topbar-trail { display: flex; align-items: center; gap: 8px; }
.topbar-trail a { color: var(--muted); }
.topbar-trail span { color: var(--ink); font-weight: 600; }
.topbar-trail span::before { content: "/"; color: var(--muted); font-weight: 400; margin-right: 8px; }
.account a[aria-current=page] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.sidebar nav a:hover, .sidebar nav a:focus-visible {
  background: var(--brand-secondary-hover);
  color: var(--brand-on-secondary-hover);
}

.login-brand { display: flex; align-items: center; gap: 20px; }
.login-brand img { display: block; width: 140px; height: auto; }
.login-brand span { color: var(--muted); }
.login-tags span, .card-icon, .doc-sidebar a[aria-current=page] {
  background: var(--brand-secondary);
  color: var(--brand-on-secondary);
}
.badge:not([class*="state-"]) { background: var(--brand-secondary); color: var(--brand-on-secondary); }
.card:hover, .initiative-card:hover { border-color: var(--accent); }
.view-tabs { border-bottom-color: var(--line); }
.view-tabs a { color: var(--muted); }
.view-tabs a.selected { border-bottom-color: var(--accent); color: var(--accent); }
.kanban-column { background: var(--brand-sidebar); border-color: var(--line); }
.kanban-column>h2 span { background: var(--brand-secondary); color: var(--brand-on-secondary); }
.work-card, .child-tasks, .move-controls { border-color: var(--line); }
.work-card h3 a { color: var(--ink); }
.card-assignee, .child-tasks small { color: var(--muted); }
.tiptap:focus { box-shadow: inset 0 0 0 2px var(--accent); }
.tiptap .selectedCell { background: var(--brand-secondary); }
.rich-toolbar { background: var(--brand-sidebar); border-color: var(--line); }
.rich-editor, .rich-status, .rich-content td, .rich-content th, .tiptap td, .tiptap th {
  border-color: var(--line);
}
.rich-status { color: var(--muted); }
.initiative-header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

@media(max-width:700px) {
  .brand { padding: 0 10px; }
  .brand img { width: 130px; }
  .login-brand img { width: 120px; }
  .page-heading { flex-wrap: wrap; }
  .initiative-header-actions { width: 100%; }
}