:root {
  /* Radii — generous and consistent; nothing in the deck is square-cornered
     except the hand-drawn worksheet photographs. */
  --r-pill: 999px;
  --r-card: 44px;   /* the card surface itself */
  --r-frame: 58px;  /* the outer phase-colour bleed */
  --r-panel: 26px;  /* white example panel */
  --r-inset: 16px;  /* sub-panel inside a panel */
  --r-chip: 14px;   /* input / output chip */
  --r-sticky: 10px; /* sticky note */

  /* Shadows — soft, warm, low-contrast. No hard drop shadows, no coloured glows
     except the method chip's phase-tinted halo. */
  --shadow-panel: 0 8px 28px rgba(20, 16, 12, 0.10);
  --shadow-sticky: 3px 5px 10px rgba(20, 16, 12, 0.16);
  --shadow-chip: 0 3px 10px rgba(20, 16, 12, 0.14);
  --shadow-lift: 0 14px 40px rgba(20, 16, 12, 0.18);
  --glow-method: 0 0 44px 10px color-mix(in oklab, var(--phase) 34%, transparent);

  /* Borders */
  --bd-hairline: 1px solid var(--rule-hairline); /* @kind other */
  --bd-dashed: 2px dashed #c9c3b9; /* @kind other */
  --bd-on-dark: 1px solid var(--rule-on-dark); /* @kind other */

  /* Textures. The dark card face carries a 1px graph grid; the light card face
     carries a dot grid. Both are near-invisible and never decorative-loud. */
  --texture-grid-dark:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 52px 52px; /* @kind other */
  --texture-dots-light:
    radial-gradient(circle, var(--paper-300) 1.6px, transparent 1.7px) 0 0 / 30px 30px; /* @kind other */
  --texture-dots-panel:
    radial-gradient(circle, #eae5de 1.5px, transparent 1.6px) 0 0 / 26px 26px; /* @kind other */
  /* The title rule under every method title. */
  --rule-title: linear-gradient(90deg, var(--honey-700), var(--honey-500)); /* @kind other */
  /* The dotted leader that trails every section heading. */
  --leader-dotted: radial-gradient(circle, #cfc9c0 1.6px, transparent 1.7px) 0 50% / 12px 4px repeat-x; /* @kind other */
  --leader-dotted-on-dark: radial-gradient(circle, #4d473c 1.6px, transparent 1.7px) 0 50% / 12px 4px repeat-x; /* @kind other */
}