/* crema v1 */
/* ─────────────────────────────────────────────────────────────────────────────
   CREMA — the shared layer on top of every app in the family.

   Espresso-dark coffee theme: deep roast surfaces, amber accent, a slate-navy
   secondary panel so an all-brown UI stays readable. Palette lifted from the
   Roastery mobile PWA (the family's design north star); component vocabulary
   and discipline inherited from the VendEx dashboard standard.

   Rules of the house:
   1. No inline <style>, no <script> blocks, no style="..." attributes.
      Dynamic values ride data-* attributes and are applied by
      applyDynamicStyles() in kit.js (CSSOM writes pass a strict CSP).
   2. Colors come from these tokens. If you are typing a hex into app code
      and a token exists for the role, use the token.
   3. Numbers are mono + tabular. Micro labels are mono, uppercase, tracked.
      Headings are display-weight Plus Jakarta Sans with tight tracking.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --accent:      #d47311;                   /* amber, the pour */
  --accent-hot:  #f0921e;                   /* hovers, hot numbers, live states */
  --accent-soft: rgba(212, 115, 17, .15);   /* badge and banner tint */
  --flame:       #ff8a3d;                   /* streaks, celebration moments */

  /* Slate-navy secondary. Keeps dense data UIs readable against the roast. */
  --panel:      #1b2a38;
  --panel-line: #2b3f52;
  --panel-ink:  #b8cfe2;

  /* Surfaces, darkest to lightest */
  --bg:       #140d07;
  --topbar:   #1c1109;
  --surface:  #221408;
  --card:     #2a1a0e;
  --card-hi:  #34210f;    /* hovered rows, raised wells */
  --line:      #3d2611;
  --line-soft: #31200e;

  /* Text */
  --text:  #f6eee2;
  --text2: #d8c3a5;
  --text3: #9c7a52;
  --ink:   #1a0d04;       /* dark espresso ink for text ON amber */

  /* Status. Warn is deliberately NOT the accent amber. */
  --good: #63c78f;
  --warn: #d9a13b;
  --bad:  #e0603a;

  /* Roast ramp: categorical series for charts, buckets, tags */
  --roast1: #f5d08a;
  --roast2: #dda45c;
  --roast3: #c8843e;
  --roast4: #8a4a1a;
  --roast5: #5a2a0c;

  /* Type */
  --font-display: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Shape (Roastery radii) */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Depth. Shadows barely read on #140d07, so the glow does the lifting. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, .45);
  --glow: 0 0 18px rgba(240, 146, 30, .12);
}

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

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 2px; }

/* ─── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .6rem 1.1rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  white-space: nowrap;
  /* Buttons are sometimes <a> elements (nav actions); keep them identical. */
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hot); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-hot); }

/* On the topbar, ghost buttons pick up a light wash instead of a border. */
.btn-on-dark { background: rgba(255, 255, 255, .07); color: var(--text); border-color: rgba(255, 255, 255, .18); }
.btn-on-dark:hover:not(:disabled) { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.btn-sm { padding: .42rem .8rem; font-size: .68rem; }
.btn-block { width: 100%; display: block; padding: .78rem; font-size: .82rem; }

/* ─── CARDS ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-sm);
}
.card-glow { box-shadow: var(--shadow-sm), var(--glow); }

/* Card label: small mono caps, with room for a badge on the right. */
.card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  margin-bottom: .85rem;
}

/* ─── BADGES ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .22rem .6rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
/* Legacy color-named aliases kept so VendEx-lineage markup ports cleanly. */
.badge-good,   .badge-green  { background: rgba(99, 199, 143, .14); color: var(--good); }
.badge-warn,   .badge-yellow { background: rgba(217, 161, 59, .16); color: var(--warn); }
.badge-bad,    .badge-red    { background: rgba(224, 96, 58, .14);  color: var(--bad); }
.badge-accent, .badge-mint   { background: var(--accent-soft);      color: var(--accent-hot); }
.badge-panel                 { background: var(--panel);            color: var(--panel-ink); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ─── TABS ────────────────────────────────────────────────────────────────── */
.tabbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.tabbar-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; gap: .35rem;
  overflow-x: auto;
}
.tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text3);
  padding: .85rem .9rem; border-bottom: 2.5px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent-hot); border-bottom-color: var(--accent); }

.tab-panel > * + * { margin-top: 1rem; }

/* ─── NUMBERS ─────────────────────────────────────────────────────────────── */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ─── SCROLLBAR ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}