/* Perito Professional Performance — tenant tokens over tokens.css (Studio Pelé,
   same flat, light design language as Esperto; only the tokens change).
   Loaded only when TENANT=perito (data/tenants/perito.json `brand.tokens`).

   The five-colour stripe: blauw #3290ce · donkerblauw #02799f · donkerrood
   #933034 · rood #ea1d23 · oranje #f16529.

   Visual grammar, from "Dokters met een koel hoofd en warm hart":
   cool colours (blues) for the head side (structure, workload, organisation),
   warm colours (reds, orange) for the heart side (energy, connection,
   wellbeing). The side is a colour FAMILY, never a verdict: good or bad is
   carried by labels, words and position, always with text as a second channel.

   Contrast (WCAG, measured on white): --blue-deep 4.9:1, --red-deep 7.7:1,
   --orange-ink 4.9:1 on its tint. --red (4.5:1 borderline) and --orange (3.0:1)
   are plane and mark colours only, never text. */
:root {
  --blue: #3290ce;
  --blue-deep: #02799f;
  --red-deep: #933034;
  --red: #ea1d23;
  --orange: #f16529;
  --orange-20: #fce0d4;
  --red-20: #f4dcdd;

  /* Text steps */
  --blue-ink: #02799f;
  --orange-ink: #ad3f0e;

  /* Perito has no yellow: display type on brand planes is white, rules too. */
  --yellow: #ffffff;
  --green: #02799f;

  /* Head / heart (semantic; Perito views only) */
  --head-1: #3290ce;
  --head-2: #02799f;
  --head-ink: #015a76; /* donkerblauw, one step darker for small labels on the light-blue column (6.2:1) */
  --heart-1: #933034;
  --heart-2: #ea1d23;
  --heart-3: #f16529;
  --heart-ink: #933034;

  --font: 'Poppins', Arial, Helvetica, sans-serif;
}

@media (prefers-contrast: more) {
  :root { --blue: #1d5f8a; --blue-deep: #015a76; --red: #a3141a; --orange: #a8431a; --yellow: #ffffff; }
}

/* The demo pill: no yellow in this brand. */
.pill-demo { background: var(--orange-20); color: var(--ink); }

/* ── Platform wordmark (until the Perito logo file lands in public/brand/perito/) ── */
.platform-wordmark { display: inline-flex; flex-direction: column; gap: 4px; line-height: 1; }
.platform-wordmark__word { font-family: var(--font); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em; color: var(--blue-deep); text-transform: lowercase; }
.platform-wordmark--dark .platform-wordmark__word { color: var(--ink); font-size: 1rem; }
.platform-stripe { display: flex; height: 4px; width: 64px; }
.platform-stripe i { flex: 1; }
.footer .platform-wordmark { margin-left: auto; }

/* ── Tenant shell (views/tenant-home.ejs) ── */
.wrap.shell-hero { padding-top: clamp(40px, 8vw, 96px); padding-bottom: 24px; }
.shell-hero .headline { font-size: clamp(2.25rem, 5.5vw, 4rem); }
.shell-hero .headline span { color: var(--blue-deep); }
.shell-hero .lede { margin-top: 24px; }
.shell-stripe { display: flex; height: var(--rule-h); width: calc(var(--rule-w) * 2); margin: 0 0 18px; }
.shell-stripe i { flex: 1; }
.wrap.shell-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; padding-bottom: 72px; }
.shell-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--white); }
.shell-card h2 { margin: 0 0 8px; font-size: var(--fs-h3); color: var(--ink); }
.shell-card p { margin: 0; }
.shell-card--empty { background: var(--grey-cool); border-style: dashed; }
.shell-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.shell-side { border-radius: 8px; padding: 14px 16px; }
.shell-side strong { display: block; font-size: 1rem; }
.shell-side span { font-size: 0.875rem; }
.shell-side--head { background: var(--blue-20); border-left: 6px solid var(--head-2); }
.shell-side--head strong { color: var(--head-ink); }
.shell-side--heart { background: var(--red-20); border-left: 6px solid var(--heart-1); }
.shell-side--heart strong { color: var(--heart-ink); }

/* White small text needs ≥ 4.5:1: on blauw #3290ce it is 3.5:1, on donkerblauw #02799f 4.9:1.
   Buttons, the active language and the chat bubble therefore sit on donkerblauw.
   (Large display type on blue planes stays blue: ≥ 3:1 is enough there.) */
.btn { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn:hover { background: #015a76; border-color: #015a76; }
.btn--ghost { background: transparent; color: var(--blue-ink); border-color: var(--blue-deep); }
.btn--ghost:hover { background: var(--blue-20); color: var(--blue-ink); }
.lang-toggle a[aria-current="true"] { background: var(--blue-deep); }
.wn-ask .msg--user { background: var(--blue-deep); }