/*
  Design tokens for proyoga.nl (light mode only), taken from the current Drupal theme ("tb_methys_ii",
  red skin): white page, #222 text, #cc0000 links, #ff0066 accent, #ddd rules,
  Expletus Sans for headings and Open Sans for body text.
  See DESIGN.md for the palette formula and usage rules.
*/

:root {
  /* Color */
  --color-ink: #222222;      /* primary text */
  --color-paper: #ffffff;    /* page background */
  --color-muted: #666666;    /* secondary text */
  --color-line: #dddddd;     /* borders, dividers */
  --color-surface: #f7f7f7;  /* subtle panels (sidebar, card hover) */
  --color-primary: #cc0000;  /* links, primary actions (theme "red skin") */
  --color-primary-deep: #990000; /* hover/active state of primary */
  --color-on-primary: #ffffff;
  --color-accent: #ff0066;   /* brand accent: wordmark, rules, decorative */
  --color-accent-text: #d6004f; /* accent as small text (AA on white) */
  --color-good: #1a7f4e;
  --color-bad: #b3261e;

  /* Type */
  --font-heading: "Expletus Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* Spacing scale (4px base unit) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Layout */
  --max-content-width: 1200px;
  --sidebar-width: 280px;
  --radius-sm: 4px;
  --radius-md: 8px;
}