/* Direction: Kestrel — a calm studio desk. Warm paper, ink-black sidebar, one signal-orange accent, a chunky grotesque display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f5f2ec;
  --surface: #fffdf9;
  --surface-2: #eae6e0;
  --border: #d7d1cc;
  --border-strong: #b4aca6;
  --ink: #15171c;
  --muted: #5e6068;
  --accent: #c9421d;
  --accent-hover: #ab3819;
  --accent-ink: #ffffff;
  --accent-text: #b23c1a;
  --accent-strong: #aa3819;
  --accent-soft: #efd9cf;
  --accent-border: #e1a38f;
  --success: #1f7a52;
  --success-ink: #ffffff;
  --success-soft: #dbe4da;
  --success-strong: #1d704b;
  --warning: #9a5b0c;
  --warning-ink: #ffffff;
  --warning-soft: #eae0d1;
  --warning-strong: #8e540b;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #eddad3;
  --danger-strong: #b3261e;
  --chart-1: #c9421d;
  --chart-2: #a38a10;
  --chart-3: #077241;
  --chart-4: #0b95ae;
  --chart-5: #454abe;
  --chart-6: #cd5db8;

  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.025em;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --x-side: #14161b;
  --x-on-dark: #f3f1ec;
  --x-on-dark-muted: #a9abb3;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #110603;
  --surface: #291f1c;
  --surface-2: #1d1210;
  --border: #322926;
  --border-strong: #58514f;
  --ink: #f5f2ec;
  --muted: #9a948f;
  --accent: #c9421d;
  --accent-hover: #d15e3f;
  --accent-ink: #ffffff;
  --accent-text: #d56c4f;
  --accent-strong: #d56c4f;
  --accent-soft: #391309;
  --accent-border: #64210f;
  --success: #1f7a52;
  --success-ink: #ffffff;
  --success-soft: #142014;
  --success-strong: #509879;
  --warning: #9a5b0c;
  --warning-ink: #ffffff;
  --warning-soft: #2f1905;
  --warning-strong: #b07f41;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #350d09;
  --danger-strong: #c9645e;
  --chart-1: #c9421d;
  --chart-2: #a9901c;
  --chart-3: #1d985b;
  --chart-4: #1b9bb4;
  --chart-5: #6571e8;
  --chart-6: #cd5db8;
}

/* Kestrel — agency portal: sidebar nav, tables, status tones, kanban board */
.nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .85rem; border-radius: 10px;
  font-size: .9rem; font-weight: 500; white-space: nowrap;
  color: var(--x-on-dark-muted);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav-link:hover { background: color-mix(in srgb, var(--x-on-dark) 10%, transparent); color: var(--x-on-dark); }
.nav-link:active { transform: scale(.98); }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th {
  text-align: left; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); padding: .85rem 1rem; white-space: nowrap;
}
.tbl td { padding: .85rem 1rem; border-top: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr { transition: background .15s ease; }
.tbl tbody tr:hover { background: var(--surface-2); }

.st { font-weight: 600; text-transform: capitalize; }
.st-good { background: var(--success-soft); color: var(--success-strong); }
.st-warn { background: var(--warning-soft); color: var(--warning-strong); }
.st-bad { background: var(--danger-soft); color: var(--danger-strong); }
.st-flat { background: var(--surface-2); color: var(--muted); }

.bar { height: .5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .6s ease; }
.bar.over > i { background: var(--danger); }
.bar.alt > i { background: var(--chart-5); }

.kpi { padding: 1.25rem; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); }
.kpi-hero { background: var(--x-side); color: var(--x-on-dark); border-color: transparent; }
.kpi-hero .kpi-label { color: var(--x-on-dark-muted); }
.kpi-label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi-num { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-top: .4rem; }

.lane { background: var(--surface-2); border-radius: var(--radius-card); padding: .75rem; min-height: 8rem; }
.tcard { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .85rem; transition: box-shadow .15s ease, transform .15s ease; }
.tcard:hover { box-shadow: 0 6px 18px rgb(0 0 0 / .08); transform: translateY(-1px); }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 999px; flex: none;
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: .75rem; font-weight: 700;
}

.rise { animation: rise .45s ease both; }
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
html.reduced-motion .rise, html.reduced-motion .bar > i, html.reduced-motion .tcard { animation: none; transition: none; }