/* ============================================================
   CONCIERGE OS — design tokens
   A property operations dashboard. Dense, functional, honest
   about being software. Not a marketing site wearing a
   dashboard costume.
   ============================================================ */

:root {
  --bg-0: #0d1013;
  --bg-1: #141a1f;
  --bg-2: #1b232a;
  --bg-3: #243039;
  --line: #2c3a45;
  --line-soft: #222d36;

  --tx-0: #eef3f6;
  --tx-1: #aebcc6;
  --tx-2: #6d7f8c;

  --acc:      #4db6a0;
  --acc-dim:  #2d6f62;
  --warn:     #d9a441;
  --urgent:   #d96a4a;
  --info:     #5b8fc7;

  --sans: "Inter Tight", Inter, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --fs-xs: 0.7rem;
  --fs-sm: 0.79rem;
  --fs-md: 0.88rem;
  --fs-lg: 1.05rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 2rem;

  --r: 6px;
  --r-lg: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  background: var(--bg-0);
  color: var(--tx-0);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; }
::selection { background: var(--acc-dim); color: var(--tx-0); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 3px; }

/* ---------- scrollbars, because this is a dashboard ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- primitives ---------- */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--tx-1); }
.faint { color: var(--tx-2); }

.label {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-2);
}

.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 0.95em; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--bg-2);
  font-size: var(--fs-sm); font-weight: 450; cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--bg-3); border-color: var(--tx-2); }
.btn--acc { background: var(--acc); border-color: var(--acc); color: #06120f; font-weight: 500; }
.btn--acc:hover { background: #5fcfb6; border-color: #5fcfb6; }
.btn--ghost { background: transparent; }
.btn--sm { padding: 0.35em 0.7em; font-size: var(--fs-xs); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.28em 0.65em; border-radius: 99px;
  border: 1px solid currentColor;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: currentColor; }
.pill--ok    { color: var(--acc); }
.pill--warn  { color: var(--warn); }
.pill--urgent{ color: var(--urgent); }
.pill--info  { color: var(--info); }
.pill--idle  { color: var(--tx-2); }

.card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}