/* Bloom CRM — design tokens (Nordic Warm). Single source of truth.
   Portовано з design-prototype/styles.css:1-47. */

/* Self-hosted: a webfont from a third-party CDN is an outage and a privacy leak on every page load.
   Axis clamped to 400-700 at build time — see scripts/build-webfont.md. */
@font-face{
  font-family:'Manrope';
  src:url('../fonts/Manrope-Variable-400-700.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
:root{
  /* color — warm, restrained, operational */
  --color-primary:#2D6A4F;
  --color-primary-hover:#235640;
  --color-primary-light:#52B788;
  --color-primary-subtle:#E3F1E8;
  --color-accent:#C8895A;
  --color-accent-strong:#A85B2C;
  --color-accent-strong-hover:#92481D;
  --color-on-accent:#fff;
  /* Secondary/faded label over a --color-primary fill (e.g. a day chip's weekday letters once active) —
     no opaque token reads right there; book.css:273 still has this inlined, not yet swept to the token. */
  --color-on-accent-muted:rgba(255,255,255,.75);
  --color-bg:#F6F5F1;
  --color-surface:#FFFFFF;
  --color-surface-alt:#F1F0EB;
  --color-border:#E6E4DC;
  --color-border-strong:#D8D5CA;
  /* Неробоча зона календаря (BLM-587, варіант A): заливка трохи темніша за surface-alt,
     штрих — між border і border-strong; окремі токени, бо ця пара ніде більше не вживається. */
  --color-offhours-fill:#ECE9E0;
  --color-offhours-line:#DBD6C8;
  --color-text:#22231F;
  --color-text-muted:#74746B;
  --color-text-faint:#9C9C92;
  --color-success:#3E8E68;
  --color-warning:#C98A00;
  --color-error:#C0392B;
  --color-error-hover:#A5311F;
  /* soft tinted surfaces for chips / soft states (sibling of --color-primary-subtle) */
  --color-error-subtle:#FCEFEC;
  --color-error-border:#F3CFC8;
  --color-star:#C98A00;
  --color-star-subtle:#FBF1DC;
  --color-star-border:#EAD3A0;

  /* booking statuses */
  --st-confirmed:#2D6A4F;
  --st-pending:#C8895A;
  --st-cancelled:#9E9E90;
  --st-noshow:#C0392B;
  --st-checked:#52B788;
  --st-completed:#6E8B83;

  /* radius */
  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:18px;

  /* spacing scale (4-based) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* elevation — soft, layered, warm-tinted */
  --sh-1:0 1px 2px rgba(34,35,31,.04), 0 1px 1px rgba(34,35,31,.03);
  --sh-2:0 1px 3px rgba(34,35,31,.05), 0 4px 12px rgba(34,35,31,.05);
  --sh-3:0 2px 6px rgba(34,35,31,.06), 0 12px 28px rgba(34,35,31,.08);
  --ring:0 0 0 3px rgba(45,106,79,.18);

  --font-display:Manrope,'Segoe UI',system-ui,sans-serif;
  --font-body:Manrope,'Segoe UI',system-ui,sans-serif;
  --sidebar-w:248px;

  /* Type scale — brandbook §2.2. Sizes live here so a screen cannot invent its own step. */
  --fs-h1:48px; --lh-h1:56px; --fw-h1:700;
  --fs-h2:32px; --lh-h2:40px; --fw-h2:700;
  --fs-page-title:24px; --lh-page-title:32px; --fw-page-title:700;
  --fs-h3:20px; --lh-h3:28px; --fw-h3:600;
  --fs-body-l:18px; --lh-body-l:28px; --fw-body-l:400;
  /* Ratio, not a length: a length base leading would override every descendant not yet migrated. */
  --fs-body:16px; --lh-body:24px; --lh-body-ratio:1.5; --fw-body:400;
  /* Weight-only variant: the identifying text of a row in a list, and nothing else (brandbook §2.2). */
  --fw-body-emphasis:600;
  /* Small / UI text is Medium by default; Small / Secondary is the same size, one weight lighter;
     Small / Emphasis is the same size at 600 — the primary name/value in a compact row (brandbook §2.2). */
  --fs-small:14px; --lh-small:20px; --fw-small:500; --fw-small-secondary:400; --fw-small-emphasis:600;
  --fs-caption:12px; --lh-caption:16px; --fw-caption:500;

  /* Metrics are single-line by design, so they take tighter leading than the headings they share a size with. */
  --fs-metric-hero:32px; --lh-metric-hero:36px;
  --fs-metric-card:24px; --lh-metric-card:28px;
  --fs-metric-inline:20px; --lh-metric-inline:24px;
  /* One weight for the whole ramp — its steps differ in size and leading, never in weight. */
  --fw-metric:700;

  /* A glyph sizes a symbol, not a paragraph — kept off the type scale so icons stop borrowing from it. */
  --icon-sm:14px; --icon-md:18px; --icon-lg:24px;

  /* The booking card's own scale (brandbook §2.3 exception): the card's height is max(durationMin,24)×1.5px,
     a picture of a duration rather than a layout choice, so the type scale's floor does not reach it. */
  --fs-slot-name:12.5px; --fs-slot-base:12px; --fs-slot-text:11px; --fs-slot-meta:10px; --fs-slot-micro:9px;
}

/* The only point where a heading changes size (brandbook §2.2). */
@media (max-width:900px){
  :root{--fs-h1:36px; --lh-h1:44px; --fs-h2:28px; --lh-h2:36px}
}
.app, .app *{box-sizing:border-box}
.app *{margin:0;padding:0}
body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);font-size:var(--fs-body);line-height:var(--lh-body-ratio);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mono{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* :where() zeroes .content's own specificity so any per-component override (e.g. .panel-head h2) always
   wins on its own merit, never on which <link> loads second — a heading migration needs no ladder to beat this. */
:where(.content) h1,:where(.content) h2,:where(.content) h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;line-height:1.2}