/* Cairoh Taskhub — design tokens (verbatim from prototype) */

:root {
  /* surfaces */
  --bg:        247 248 250;
  --paper:     247 248 250;
  --paper-2:   241 243 247;
  --paper-3:   233 236 241;
  --surface:   255 255 255;
  --surface-2: 252 252 254;

  /* ink + muted */
  --ink:        17  24  39;
  --ink-2:      31  41  55;
  --muted:     100 116 139;
  --muted-2:   148 163 184;

  /* borders */
  --rule:      226 232 240;
  --rule-2:    203 213 225;

  /* default accent: indigo */
  --accent:    99  102 241;
  --accent-2:  79   70 229;
  --accent-soft:224 231 255;

  --warm:      245 158  11;
  --warm-soft: 254 243 199;
  --forest:     16 185 129;
  --forest-soft:209 250 229;
  --brick:     239  68  68;
  --brick-soft:254 226 226;
  --navy:       59 130 246;
  --navy-soft: 219 234 254;
  --berry:     236  72 153;
  --berry-soft:252 231 243;

  --r-pill:    999px;
  --r-card:    10px;
  --r-btn:     8px;
  --r-input:   8px;

  --sh-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.03);
  --sh-md: 0 2px 4px rgba(15,23,42,0.04), 0 8px 16px -6px rgba(15,23,42,0.08);
  --sh-pop:0 4px 12px rgba(15,23,42,0.08), 0 24px 48px -12px rgba(15,23,42,0.18);

  --row-py: 12px;
}

:root[data-accent="emerald"] { --accent: 16 185 129; --accent-2: 5 150 105; --accent-soft:209 250 229; }
:root[data-accent="coral"]   { --accent: 249 115  22; --accent-2: 234  88  12; --accent-soft:255 237 213; }
:root[data-accent="violet"]  { --accent: 139  92 246; --accent-2: 124  58 237; --accent-soft:237 233 254; }
:root[data-accent="rose"]    { --accent: 244  63  94; --accent-2: 225  29  72; --accent-soft:255 228 230; }

:root[data-density="compact"]  { --row-py: 8px;  }
:root[data-density="cozy"]     { --row-py: 12px; }
:root[data-density="spacious"] { --row-py: 18px; }

:root[data-theme="dark"] {
  --bg:        15  18  24;
  --paper:     15  18  24;
  --paper-2:   24  28  37;
  --paper-3:   33  38  49;
  --surface:   22  26  34;
  --surface-2: 28  32  41;

  --ink:       243 246 250;
  --ink-2:     220 226 235;
  --muted:     148 163 184;
  --muted-2:   100 116 139;

  --rule:      45  52  64;
  --rule-2:    66  74  88;

  --accent-soft: 55 48 110;
  --warm-soft:   75 49  15;
  --forest-soft: 19  78  60;
  --brick-soft:  90  29  29;
  --navy-soft:   30  58 100;
  --berry-soft:  90  30  60;

  --sh-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  --sh-md: 0 4px 8px rgba(0,0,0,0.35), 0 12px 24px -6px rgba(0,0,0,0.5);
  --sh-pop:0 8px 24px rgba(0,0,0,0.5), 0 32px 64px -12px rgba(0,0,0,0.6);
}
:root[data-theme="dark"][data-accent="emerald"] { --accent-soft: 19 78 60; }
:root[data-theme="dark"][data-accent="coral"]   { --accent-soft: 85 36 12; }
:root[data-theme="dark"][data-accent="violet"]  { --accent-soft: 64 35 130; }
:root[data-theme="dark"][data-accent="rose"]    { --accent-soft: 100 28 50; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  font-feature-settings: 'cv11','ss01';
  transition: background-color .25s ease, color .25s ease;
}
#app { position: relative; height: 100vh; display: flex; flex-direction: column; }

.font-display { font-family: 'Inter', sans-serif; letter-spacing: -0.025em; font-weight: 700; }
.font-mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: 'tnum','zero'; }
.tabular      { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--muted));
}
.ticket-id { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: -0.01em; color: rgb(var(--muted)); font-variant-numeric: tabular-nums; }
.hairline { border-color: rgb(var(--rule)); }

::selection { background: rgb(var(--accent) / 0.18); color: rgb(var(--ink)); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--rule-2) / 0.7); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--muted) / 0.45); background-clip: padding-box; border: 3px solid transparent; }
:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 4px; }
button:focus, [role="button"]:focus, input:focus, select:focus, textarea:focus, a:focus { outline: none; }
button:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }

button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .06s ease;
  border: 1px solid transparent; cursor: pointer;
  border-radius: var(--r-btn);
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
.btn-primary { background: rgb(var(--ink)); color: white; }
.btn-primary:hover { background: rgb(var(--ink-2)); }
.btn-accent  { background: rgb(var(--accent)); color: white; box-shadow: 0 1px 2px rgba(99,102,241,0.25), 0 1px 0 rgba(255,255,255,0.18) inset; }
.btn-accent:hover { background: rgb(var(--accent-2)); }
.btn-secondary { background: rgb(var(--surface)); color: rgb(var(--ink)); border-color: rgb(var(--rule)); }
.btn-secondary:hover { background: rgb(var(--paper-2)); border-color: rgb(var(--rule-2)); }
.btn-ghost { color: rgb(var(--muted)); padding: 5px 10px; font-weight: 500; border-radius: var(--r-btn); }
.btn-ghost:hover { color: rgb(var(--ink)); background: rgb(var(--paper-2)); }

input, select, textarea {
  font-family: inherit; font-size: 13px; color: rgb(var(--ink));
  background: rgb(var(--surface)); border: 1px solid rgb(var(--rule));
  padding: 7px 12px; outline: none; border-radius: var(--r-input);
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:focus, select:focus, textarea:focus { border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.16); }
input::placeholder { color: rgb(var(--muted) / 0.65); }

.hl { height: 1px; background: rgb(var(--rule)); }
.vl { width: 1px; background: rgb(var(--rule-2)); }
.card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--rule));
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
}

.prio { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.prio-urgent { background: rgb(var(--brick)); box-shadow: 0 0 0 3px rgb(var(--brick) / 0.18); }
.prio-high   { background: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / 0.16); }
.prio-medium { background: rgb(var(--warm)); }
.prio-low    { background: rgb(var(--rule-2)); }

.pip { display:inline-block; width: 7px; height: 7px; flex-shrink:0; border-radius: 50%; }

.shadow-pop { box-shadow: var(--sh-pop); }
.shadow-card { box-shadow: var(--sh-md); }

@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fadein { animation: fadein .2s ease-out; }
@keyframes pulse-dot { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }
@keyframes slide-in-r { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.slide-in-r { animation: slide-in-r .22s ease-out; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum','zero'; }
[data-link]:hover { cursor: pointer; }

.prose { font-size: 13.5px; color: rgb(var(--ink-2)); line-height: 1.65; }
.prose p { margin: 0 0 10px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: rgb(var(--ink)); }
.prose em { font-style: italic; }
.prose code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: rgb(var(--paper-2)); padding: 1px 6px; border-radius: 4px; color: rgb(var(--ink)); }
.prose a { color: rgb(var(--accent)); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--accent) / 0.4); }
.prose ul, .prose ol { padding-left: 18px; margin: 0 0 10px; }
.prose li { margin-bottom: 2px; }