/* Global theme for tasklane — dark palette + typography ported from the Claude
   Design "Tasklane" prototype. Component layout lives in index.css. */

:root {
  /* Native widgets (the due-date input and its calendar popup) follow this. */
  color-scheme: dark;

  --bg: #0a0a0b;
  --sidebar: #0c0c0e;
  --panel: #111113;
  --panel-2: #141417;
  --border: #1f1f23;
  --border-soft: #161619;
  --border-hair: #131315;
  --chip-border: #222226;
  --edit-bg: #151517;
  --edit-border: #2c2c32;

  --text: #ededef;
  --text-strong: #f4f4f6;
  --text-title: #e9e9ec;
  --muted: #9a9aa0;
  --muted-2: #8a8a92;
  --dim: #6c6c72;
  --dim-2: #5c5c63;
  --dim-3: #55555c;
  --dim-4: #4e4e55;
  --faint: #44444a;

  /* Hue states a fact; interaction is neutral. Red is the alarm family
     (high priority, overdue, delete, errors), amber is medium priority only,
     blue low priority only, green completion only. The brand mark is the one
     decorative use of red — everything interactive (buttons, selection, focus)
     draws from the neutral text scale so color keeps its meaning. */
  /* One red, aliased by role, so a change to the hue can't make brand and alarm
     silently drift apart. --danger-text is the lighter cut for red *text* on a
     raised surface, where the base red only reaches 3.6:1. */
  --red: #e23744;
  --red-text: #f2626d;
  --brand: var(--red);
  --danger: var(--red);
  --danger-text: var(--red-text);
  /* Finished work recedes rather than celebrates — the same instinct as the
     struck-through, dimmed title beside it. Grey also keeps the filled circle
     clearly apart from the white selection square in select mode. Aliased, not
     re-typed: a second copy of the literal is how a token quietly drifts from
     the ramp it belongs to. */
  --done: var(--muted-2);
  --pri-none: #5c5c63;
  --pri-low: #5b9dff;
  --pri-med: #f2a13c;
  --pri-high: var(--red);

  --hover: #0e0e10;
  --hover-2: #161619;
  --sel: #232327;

  --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

input {
  font-family: inherit;
}

/* A key hint, styled once globally (campaign_manager's pattern). Each shortcut
   is advertised on the control it operates — there is no separate legend, so a
   key is never described in two places at once. */
kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--panel-2);
  border: 1px solid var(--chip-border);
  color: var(--muted-2);
}

input::placeholder {
  color: var(--dim-4);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #232327;
  border-radius: 8px;
  border: 3px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: #33333a;
}

/* Priority dot colors, shared by the sidebar, task rows, and the priority menu. */
.pri-dot,
.nav-dot {
  border-radius: 2px;
  flex-shrink: 0;
}
.pri-dot.p0,
.nav-dot.p0 {
  background: var(--pri-none);
}
.pri-dot.p1,
.nav-dot.p1 {
  background: var(--pri-low);
}
.pri-dot.p2,
.nav-dot.p2 {
  background: var(--pri-med);
}
.pri-dot.p3,
.nav-dot.p3 {
  background: var(--pri-high);
}

/* Due / group tone colors, shared by group headers and due chips. */
.tone-overdue {
  color: var(--danger);
}
/* Due tones are a luminance ramp — nearest is brightest — so only overdue
   carries a hue. "Today" in amber used to collide with the medium-priority dot
   in the same row. */
.tone-today {
  color: var(--text-strong);
}
.tone-tomorrow {
  color: #c2c2c8;
}
.tone-week {
  color: var(--muted);
}
.tone-later {
  color: #7a7a80;
}
.tone-none {
  color: var(--dim);
}
.tone-completed {
  color: var(--muted-2);
}
.tone-done {
  color: var(--dim-3);
}