/* ============================================================
   Kermony Office — Component layer (pure CSS, zero JS)
   ------------------------------------------------------------
   Depends on tokens/tokens.css for custom properties.
   Import order:
     <link rel="stylesheet" href=".../tokens/tokens.css">
     <link rel="stylesheet" href=".../css/components.css">
   Every spec here is lifted verbatim from the v1.0 reference
   preview cards (buttons, fields, badges, SRRI, cards, rules).
   ============================================================ */

/* ---------- Eyebrow with em-dash bullet ----------
   Usage: <p class="k-eyebrow">— Proposition d'investissement</p>
   The em-dash is authored in the text, not generated, so it can
   be omitted where the design calls for a plain label.          */
.k-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--violet);
  font-weight: 600;
  margin: 0 0 14px;
}
.k-eyebrow--muted { color: var(--muted); }
.k-eyebrow--cyan  { color: var(--cyan); }   /* on ink surfaces */

/* ---------- Label / small-caps ---------- */
.k-label {
  font-size: 10.5px;
  letter-spacing: var(--ls-small-caps);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- Section titles ---------- */
.k-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: var(--ls-display);
}
.k-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: var(--ls-h);
}

/* ---------- Lede ---------- */
.k-lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- Quote (client citation) ----------
   Guillemets are coloured violet. Always attribute beneath.     */
.k-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.25;
  letter-spacing: var(--ls-h);
}
.k-quote .k-guillemet { color: var(--violet); }
.k-quote-attr {
  margin-top: 32px;
  font-size: 14px;
  letter-spacing: var(--ls-small-caps);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ============================================================
   Buttons — hover inverts (swap bg/fg), 0.15s, no easing curve
   ============================================================ */
.k-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  padding: 11px 20px;
  border: var(--bw-rule) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-radius: var(--r-0);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.k-btn:hover { background: var(--paper); color: var(--ink); }

.k-btn--ghost { background: transparent; color: var(--ink); }
.k-btn--ghost:hover { background: var(--ink); color: var(--paper); }

.k-btn--accent { border-color: var(--violet); background: var(--violet); }
.k-btn--accent:hover { background: var(--paper); color: var(--violet); }

.k-btn--on-dark { border-color: var(--paper); background: transparent; color: var(--paper); }
.k-btn--on-dark:hover { background: var(--paper); color: var(--ink); }

.k-btn--small { padding: 8px 14px; font-size: 10px; letter-spacing: 0.22em; }

.k-btn--arrow::after { content: "→"; margin-left: 2px; letter-spacing: 0; }

/* ============================================================
   Fields — no box, no fill; a single underline that switches
   to violet on focus.
   ============================================================ */
.k-field { display: flex; flex-direction: column; gap: 6px; }
.k-field > label {
  font-size: 10.5px;
  letter-spacing: var(--ls-small-caps);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.k-field > input,
.k-field > select,
.k-field > textarea {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: var(--bw-rule) solid var(--ink);
  padding: 6px 0;
  outline: none;
  border-radius: var(--r-0);
}
.k-field > input:focus,
.k-field > select:focus,
.k-field > textarea:focus { border-bottom-color: var(--violet); }
.k-field > input::placeholder { color: var(--muted); }

/* ============================================================
   Badges
   ============================================================ */
.k-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--ink);
  color: var(--ink);
  border-radius: var(--r-0);
}
.k-badge--solid  { background: var(--ink); color: var(--paper); }
.k-badge--violet { border-color: var(--violet); color: var(--violet); background: rgba(109,45,104,.08); }
.k-badge--vert   { border-color: var(--vert);   color: var(--vert);   background: rgba(31,77,46,.08); }
.k-badge--rouge  { border-color: var(--rouge);  color: var(--rouge);  background: rgba(172,35,105,.08); }
.k-badge--muted  { border-color: var(--rule);   color: var(--muted); }
.k-badge--cyan   { border-color: var(--cyan);   color: var(--navy);   background: rgba(113,200,218,.18); }

/* ============================================================
   SRRI pill — circular digit 1–7. The ONLY rounded component.
   Filled ink for levels >= 5, hairline-only otherwise.
   ============================================================ */
.k-srri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: var(--bw-rule) solid var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
}
.k-srri--on { background: var(--ink); color: var(--paper); }

/* ============================================================
   Cards — a paper rectangle with a 1px hairline border. No more.
   ============================================================ */
.k-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 28px 32px;
  border-radius: var(--r-0);
}
.k-card--top  { border-top: var(--bw-accent) solid var(--violet); }
.k-card--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.k-card--dark .k-label,
.k-card--dark .k-kpi-k { color: var(--cyan); }
.k-card--dark .k-kpi-u { color: var(--cyan); }

/* ---------- KPI value ---------- */
.k-kpi-k {
  font-size: 11px;
  letter-spacing: var(--ls-small-caps);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.k-kpi-v {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.k-kpi-u { font-size: 18px; color: var(--violet); margin-left: 4px; font-weight: 500; }
.k-kpi-d { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 10px; }

/* ---------- KPI strip (3–4 metrics, ruled top & bottom) ---------- */
.k-kpi-strip {
  display: grid;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 28px 0;
}
.k-kpi-strip > .k-kpi-cell {
  padding: 22px 24px;
  border-right: 1px solid var(--rule);
}
.k-kpi-strip > .k-kpi-cell:last-child { border-right: 0; }

/* ============================================================
   Tables — tabular figures, right-aligned numbers, signed
   deltas in colour, 2px ink rule above the total row.
   ============================================================ */
.k-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-feature-settings: "tnum" 1;
}
.k-table th {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 12px 6px;
  border-bottom: var(--bw-rule) solid var(--ink);
  text-align: right;
}
.k-table th:first-child { text-align: left; }
.k-table td {
  padding: 12px 6px;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  font-weight: 500;
}
.k-table td:first-child { text-align: left; font-weight: 400; }
.k-table .k-cat {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
}
.k-table .k-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.k-table .k-pos { color: var(--vert);  font-weight: 600; }
.k-table .k-neg { color: var(--rouge); font-weight: 600; }
.k-table .k-flat { color: var(--muted); font-weight: 400; }
.k-table tfoot td {
  border-bottom: 0;
  border-top: var(--bw-strong) solid var(--ink);
  padding: 14px 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}
.k-table tfoot .k-total-weight { color: var(--violet); }

/* ---------- Numbers ---------- */
.k-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.k-unit { color: var(--violet); font-size: 0.7em; margin-left: 2px; }

/* ============================================================
   Rules / dividers
   ============================================================ */
.k-rule        { border: 0; border-top: 1px solid var(--rule); margin: var(--s-7) 0; }
.k-rule--strong{ border: 0; border-top: var(--bw-strong) solid var(--ink); }
.k-rule--accent{ border: 0; border-top: var(--bw-accent) solid var(--violet); }

/* ============================================================
   Surfaces
   ============================================================ */
.k-on-ink {
  background: var(--ink);
  color: var(--paper);
}
.k-on-ink .k-eyebrow { color: var(--cyan); }
.k-on-ink a { color: var(--cyan); }