/* Design tokens. Legacy names (--border-color, --green-color, …) stay until nothing uses them. */
:root {
  /* Colours */
  --border-color: rgba(34,34,34, 0.1);
  --green-color: #d4e157;

  --color-ink: #222;
  --color-text: #333;
  --color-subtle: #666;
  --color-canvas: #fff;
  --color-surface: #f5f5f0;
  --color-band: #f8f8f6;
  --color-border: var(--border-color);
  --color-accent: var(--green-color);
  --color-accent-ink: #6b7a00;

  /* Fonts */
  --font-weight-bold: 400;
  --font-size-title: 1.8em;
  --font-size-title-smaller: 1.6em;
  --font-size-big-title: 2.2em;

  --text-small: 0.8rem;
  --text-normal: 1rem;
  --text-large: 1.5rem;

  /* Space and shape */
  --space-block: 1rem;
  --space-inline: 1ch;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* Depth and motion */
  --shadow-raised: 0 12px 32px rgb(0 0 0 / 0.08);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout settings */
  --section-padding: 60px 90px;
  --section-padding-bigger: 60px 200px;
}