:root {
  /* Color */
  --oc-ink: #111214;
  --oc-blue: #2859f6;
  --oc-blue-soft: #dfe7ff;
  --oc-green: #31b968;
  --oc-amber: #e8a329;
  --oc-coral: #e85d4a;
  --oc-paper: #f6f5f1;
  --oc-white: #ffffff;
  --oc-muted: #74736e;
  --oc-line: #dddcd7;
  --oc-dark-panel: #141518;

  /* Type */
  --oc-font-display: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --oc-font-body: Manrope, Arial, sans-serif;
  --oc-font-hand: Caveat, "Segoe Print", cursive;

  /* A4 SVG system: viewBox 0 0 1240 1754 */
  --oc-page-width: 1240;
  --oc-page-height: 1754;
  --oc-page-margin: 80;
  --oc-column-gap: 20;
  --oc-baseline: 8;

  /* Reusable spacing */
  --oc-space-1: 8px;
  --oc-space-2: 16px;
  --oc-space-3: 24px;
  --oc-space-4: 32px;
  --oc-space-6: 48px;
  --oc-space-8: 64px;
  --oc-space-10: 80px;
}