@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');

:root {
  --canvas: #FAFAF7;
  --surface: #FFFFFF;
  --ink: #0A0F1C;
  --ink-2: #1F2937;
  --muted: #5A6478;
  --hairline: #E8E5DC;
  --accent: #1F3A8A;
  --signal: #D97757;
  --critical: #B91C1C;
  --success: #15803D;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans: 'General Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01" on;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}

.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; }
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.muted { color: var(--muted); }
.tabular { font-variant-numeric: tabular-nums; }

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--canvas);
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--ink);
  background: var(--canvas);
}

.app-bar .brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.app-bar .brand .name { font-family: var(--font-serif); font-size: 20px; line-height: 1; }
.app-bar .brand .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.app-bar .right {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
}
.app-bar .right .who { display: flex; align-items: center; gap: 8px; }
.app-bar .right .avatar {
  width: 28px; height: 28px;
  background: var(--ink); color: var(--canvas);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 14px; line-height: 1;
}

.tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink);
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--canvas);
  color: var(--ink);
  white-space: nowrap;
}
.tag.urgent { background: var(--signal); }
.tag.routine { background: var(--canvas); color: var(--muted); border-color: var(--hairline); }
.tag.success { background: var(--canvas); color: var(--success); border-color: var(--success); }
.tag.muted { background: var(--canvas); color: var(--muted); border-color: var(--hairline); }
.tag.ink { background: var(--ink); color: var(--canvas); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--canvas);
  border: 1px solid var(--ink);
  padding: 9px 14px;
  box-shadow: 4px 4px 0 0 var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.card {
  background: var(--surface);
  border: 1px solid var(--ink);
  padding: 20px;
}
.card.hard { box-shadow: 4px 4px 0 0 var(--ink); }

.dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--success);
  margin-right: 8px;
}