/* ============================================================================
   Harmonica B2B — the dashboard theme ("Pyro" / Olympia care intelligence).
   Ported verbatim from pyro/src/design-system/styles/tokens.css.
   A deliberately different register from the resident surfaces: Anthropic /
   Cursor-grade calm — tinted cream canvas, warm ink, terracotta primary,
   Fraunces display serif + Inter UI sans + JetBrains Mono, hairline borders,
   colour-block-first elevation (shadow rare). Scope: wrap the page (or any
   subtree) in class="b2b".
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..500&family=JetBrains+Mono:wght@400;500;600&display=swap");

.b2b {
  /* === Canvas & surfaces === */
  --color-canvas: #faf9f5;            /* tinted cream — page floor */
  --color-surface-soft: #f5f0e8;      /* section dividers, hover tints */
  --color-surface-card: #efe9de;      /* feature cards, one step darker */
  --color-surface-cream-strong: #e8e0d2; /* emphasized bands, selected tabs */
  --color-surface-dark: #181715;      /* data-dense dark chrome */
  --color-surface-dark-elevated: #252320;
  --color-surface-dark-soft: #1f1e1b;
  --color-on-dark: #faf9f5;
  --color-on-dark-soft: #a09d96;

  /* === Ink & body === */
  --color-ink: #141413;
  --color-body-strong: #252523;
  --color-body: #3d3d3a;
  --color-muted: #6c6a64;
  --color-muted-soft: #8e8b82;

  /* === Hairlines === */
  --color-hairline: #e6dfd8;
  --color-hairline-soft: #ebe6df;

  /* === Brand / primary terracotta === */
  --color-coral: #cc785c;
  --color-primary: var(--color-coral); /* the ONLY warm accent on console & family surfaces — never the tablet's #e98047 */
  --color-coral-active: #a9583e;
  --color-coral-soft: #f0d6cb;
  --color-coral-disabled: #e6dfd8;

  /* === Status === */
  --color-amber: #e8a55a;
  --color-amber-soft: #f5e4cf;
  --color-amber-deep: #8a5a14;
  --color-teal: #5db8a6;
  --color-success: #5db872;
  --color-success-soft: #d8efd8;
  --color-warning: #d4a017;
  --color-error: #c64545;
  --color-sage: #6f8c7c;
  --color-sage-deep: #34594a;

  /* === Radii === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* === Type stacks === */
  --font-display: "Fraunces", "Tiempos Headline", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-sans: "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* === Elevation: colour-block first, shadow rare === */
  --shadow-panel: 0 1px 3px rgba(20, 20, 19, 0.06);
  --shadow-card: 0 1px 2px rgba(20, 20, 19, 0.04);

  /* === Display type (website ladder — pending that surface; the console
        does NOT use these) === */
  --display-xl-size: 64px; --display-xl-tracking: -1.5px; --display-xl-leading: 1.05;
  --display-lg-size: 48px; --display-lg-tracking: -1px;   --display-lg-leading: 1.1;
  --display-md-size: 36px; --display-md-tracking: -0.5px; --display-md-leading: 1.15;
  --display-sm-size: 28px; --display-sm-tracking: -0.3px; --display-sm-leading: 1.2;

  /* === Console type scale — FOUR SIZES ONLY (label / body / title / display).
        Hierarchy via weight + colour + family, never more sizes and never
        uppercase shouting in cells. === */
  --text-label: 13px;
  --text-body: 15px;
  --text-title: 18px;
  --text-display: 28px;  /* serif: page titles, headline numbers */
  --text-heading: 28px;  /* alias of display — kept for ported CSS */

  color: var(--color-ink);
  background: var(--color-canvas);
  font-family: var(--font-sans);
}