/*
 * Truso design tokens. The ONE place brand colours and fonts live: a brand
 * change is an edit here. The logo is the outlined "truso." wordmark in
 * assets/ (truso-wordmark-emerald.svg / -ivory.svg); favicons are there too.
 *
 * Two identities, never mixed (plans/2026-11-03-truso-v1-build.md, Brand system):
 *   --truso-*   Truso's own look, used only in the signed-in agency workspace.
 *   --client-*  Neutral template for anything a prospect or client sees.
 *               Takes the agency's colour through --agency-brand at runtime.
 */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Truso brand */
  --truso-emerald: #123B35;
  --truso-emerald-hover: #0B2622;
  --truso-ivory: #F7F7F2;
  --truso-gold: #C3A875;
  --truso-gold-text: #7A6034;
  --truso-gold-tint: rgba(195, 168, 117, 0.18);

  /* Truso neutrals */
  --truso-ink: #1A1F1D;
  --truso-slate: #5B6662;
  --truso-line: #E3E3DA;
  --truso-line-strong: #C9CCC2;
  --truso-card: #FFFFFF;
  --truso-on-emerald-muted: #CFDAD6;
  --truso-alert: #A33A2B;
  --truso-alert-tint: #F6E7E4;

  --truso-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Client-facing template */
  --client-bg: #FFFFFF;
  --client-page: #F4F5F7;
  --client-ink: #1F2328;
  --client-muted: #59606A;
  --client-line: #E6E8EB;
  --client-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --agency-brand: #2F5BD3;      /* replaced at runtime with the agency's colour */
  --agency-on-brand: #FFFFFF;   /* switched to dark ink when the colour is light */

  /* Shared scale */
  --radius-card: 12px;
  --radius-control: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --control-height: 44px;
}