/* RoastCurve — design tokens (authoritative palette from docs/startup-design/03-brand)
   Dark-mode-primary, instrument-grade. No web fonts → offline-portable. */

:root {
  /* ---- Semantic curve colors (= the brand) ---- */
  --bt:        #e8924a;   /* bean temp — warm heart of the curve */
  --bt-soft:   rgba(232,146,74,.16);
  --et:        #6b9bbd;   /* environment temp — cool counterpoint */
  --et-soft:   rgba(107,155,189,.14);
  --ror:       #7bc47a;   /* rate of rise — the "healthy?" signal */
  --ror-soft:  rgba(123,196,122,.16);
  --accent:    #c27832;   /* brand accent / CTAs — used sparingly */
  --accent-hi: #d98a3e;
  --fc:        #f5f2ec;   /* first-crack marker — clean event punctuation */

  /* ---- Dark canvas neutrals ---- */
  --bg:        #14110e;   /* near-black, warm-tinted (roaster's room) */
  --bg-1:      #1c1814;   /* panel */
  --bg-2:      #251f1a;   /* raised panel / hover */
  --bg-3:      #2f2822;   /* border-ish raised */
  --line:      #3a3128;   /* hairline borders */
  --line-soft: rgba(245,242,236,.07);

  --fg:        #f5f2ec;   /* primary text */
  --fg-2:      #c9bfb2;   /* secondary */
  --fg-3:      #8e8579;   /* muted / labels */
  --fg-4:      #61594f;   /* faint */

  /* ---- Status ---- */
  --ok:        #7bc47a;
  --warn:      #e8b04a;
  --danger:    #e0664a;

  /* ---- Type ---- */
  --font-ui:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* ---- Radii / elevation / spacing ---- */
  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 8px 28px rgba(0,0,0,.45);
  --sh-glow: 0 0 0 1px rgba(194,120,50,.35), 0 8px 30px rgba(194,120,50,.12);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Tabular numerics — numbers read instantly, no jitter as they tick */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- Components ---- */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 10px 16px; border-radius: var(--r);
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line); cursor: pointer;
  font-size: 14px; font-weight: 550;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.btn:hover { background: var(--bg-3); border-color: var(--fg-4); }
.btn:active { transform: translateY(1px); }
.btn-accent {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: transparent; color: #1b120a; font-weight: 650;
}
.btn-accent:hover { filter: brightness(1.06); background: linear-gradient(180deg, var(--accent-hi), var(--accent)); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn-ghost:hover { background: var(--bg-2); color: var(--fg); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--bg-2); color: var(--fg-2); border: 1px solid var(--line);
}

/* keyboard key glyph */
.kbd {
  font-family: var(--font-num); font-size: 12px; font-weight: 600;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3); color: var(--fg);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px;
}

/* big numeric readout (BT/ET/ROR/time) */
.readout { display: flex; flex-direction: column; gap: 2px; }
.readout .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.readout .val { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1; }
.readout .unit { font-size: .5em; color: var(--fg-3); font-weight: 500; }

.dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(123,196,122,.7); animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(123,196,122,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(123,196,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(123,196,122,0); }
}

.muted { color: var(--fg-3); }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; }
.gap2 { gap: var(--s2); } .gap3 { gap: var(--s3); } .gap4 { gap: var(--s4); } .gap5 { gap: var(--s5); }

/* ---- Light mode (toggle: body.light) — chrome flips, curve colors stay semantic ---- */
body.light {
  --bg: #f3efe7; --bg-1: #fbf8f2; --bg-2: #efe9df; --bg-3: #e7e0d3;
  --line: #ddd5c6; --line-soft: rgba(20,17,14,.08);
  --fg: #241d15; --fg-2: #5b5247; --fg-3: #897f72; --fg-4: #b4aa9c;
  --grid: #d8cfbf; --axis-label: #897f72; --cursor: rgba(20,17,14,.4); --insp-line: #2a2118; --dot-stroke: #fbf8f2;
}
/* SVG chart theming in light mode (CSS overrides the presentation attributes set in curve.js) */
body.light svg [stroke="#3a3128"] { stroke: var(--grid); }
body.light svg [fill="#8e8579"]   { fill: var(--axis-label); }
body.light svg [stroke="rgba(245,242,236,.3)"] { stroke: var(--cursor); }
body.light svg [stroke="#f5f2ec"] { stroke: var(--insp-line); }
body.light svg [stroke="#14110e"] { stroke: var(--dot-stroke); }