:root {
  /* ---------- 60 — neutral base (background, surfaces) ---------- */

  --color-bg: #edece9;
  --color-surface: #ffffff;
  --color-surface-muted: #f3f3ee;
  --color-border: #ebebe4;

  /* ---------- 30 — brand green (secondary surfaces, ink) ---------- */

  --color-green-900: #064e3b;
  --color-green-800: #0f5748;
  --color-green-700: #1a6b58;
  --color-green-light: #2ecc71;
  --color-green-100: #e6f1ec;

  /* ---------- 10 — gold accent (actions, focus, highlights) ---------- */

  --color-gold-500: #efb627;
  --color-gold-600: #d99f13;
  --color-gold-100: rgba(239, 182, 39, 0.16);

  /* ---------- text ---------- */

  --color-text: #1b2320;
  --color-text-secondary: #5c665e;
  --color-text-muted: #98a098;
  --color-text-on-green: #ffffff;
  --color-text-on-gold: var(--color-green-900);

  /* ---------- type ---------- */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body:
    "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------- radius — 90% ---------- */
  --radius-sm: 0.54rem;
  --radius-md: 0.81rem;
  --radius-lg: 1.26rem;
  --radius-xl: 1.8rem;
  --radius-full: 999px;

  /* ---------- shadow — 90% ---------- */
  --shadow-card:
    0 27px 63px -27px rgba(10, 68, 56, 0.22), 0 1.8px 9px rgba(10, 68, 56, 0.05);
  --shadow-soft: 0.9px 0.9px 2.7px rgba(10, 68, 56, 0.06);
  --shadow-button: 0 12.6px 21.6px -10.8px rgba(239, 182, 39, 0.45);
  --shadow-focus: 0 0 0 3.6px var(--color-gold-100);

  /* ---------- status ---------- */
  --error-color: #dc2626;
}