:root {
  /* PALETTE */
  --black: #1A1916;
  --white: #FFFFFF;
  --off: #FAF9F7;
  --warm: #E8E5DE;
  --green: #02A86D;
  --green-dark: #0A764F;
  --green-deep: #0E6042;
  --accent-yellow: #E6A739;

  --gold: var(--green);

  --ink-70: rgba(26, 25, 22, .7);
  --ink-50: rgba(26, 25, 22, .5);
  --line: rgba(26, 25, 22, .12);

  --max: 1200px;

  --switcher-h: 42px;

  --font-display: 'Inter', sans-serif;
  --font-body: 'Krub', sans-serif;
  --font-quote: 'Lora', serif;
  --font-display-weight: 700;

  /* TYPE ROLES (see css/type-roles.css) */
  --type-display: var(--font-display);
  --type-h1: var(--font-display);
  --type-h2: var(--font-display);
  --type-h3: var(--font-body);
  --type-overline: var(--font-body);
  --type-quote: var(--font-quote);
  --type-body: var(--font-body);
  --type-label: var(--font-body);
  --type-kicker: var(--font-display);
  --type-sidebar: var(--font-display);

  --type-page-display: var(--type-display);
  --type-page-h1: var(--type-display);
  --type-statement: var(--type-display);
  --type-caption: var(--type-body);

  --type-photo-title: var(--font-display);

  --weight-quote: 400;

  /* DIAGRAM TOKENS — primary palette only */
  --venn-ink: var(--black);
  --venn-muted: var(--ink-50);
  --venn-ink-inv: var(--off);

  --venn-c1: var(--black);
  --venn-c2: var(--warm);
  --venn-c3: var(--green);
  --venn-c4: var(--green-dark);

  --venn-card-bg: var(--white);
  --venn-diagram-bg: var(--white);
  --venn-section-bg: var(--off);

  --venn-fill-opacity: 0.22;
  --venn-solid-opacity: 0.88;

  --venn-label-transform: none;
  --venn-label-spacing: 0;
  --venn-label-weight: 600;
  --venn-center-fill: var(--green-deep);
  --venn-center-ink: var(--white);
  --venn-center-style: normal;
  --venn-center-weight: 700;
  --venn-center-font-size: 14px;
  --venn-center-spacing: 0.05em;

  /* Holistic example page (3 circles) */
  --holistic-c1: var(--black);
  --holistic-c2: var(--green);
  --holistic-c3: var(--green-dark);

  /* SEMANTIC ALIASES */
  --ink: var(--black);
  --paper: var(--off);
  --rule: var(--warm, var(--line));
  --muted: var(--ink-70);
  --caption: var(--ink-50);
  --text-muted: var(--ink-70);
  --text-caption-color: var(--ink-50);

  /* ON-DARK SURFACES (CEO proof, CTA) */
  --dark-section-bg: var(--black);
  --on-dark: #f0ece2;
  --on-dark-muted: color-mix(in srgb, var(--on-dark) 78%, transparent);
  --on-dark-subtle: color-mix(in srgb, var(--on-dark) 62%, transparent);
  --on-dark-faint: color-mix(in srgb, var(--on-dark) 52%, transparent);
  --on-dark-border: color-mix(in srgb, var(--on-dark) 14%, transparent);

  --color-overline-accent: #000000;
  --color-label-accent: var(--ink);
  --color-label-on-dark: var(--green);
}

.framework-venn .ctr,
.framework-venn .ctr-inv {
  font-size: var(--venn-center-font-size, 14px);
  letter-spacing: var(--venn-center-spacing, 0.05em);
}