/* Living Canvas: shared by static public HTML and the application. */
:root {
  --canvas: #f6f5ef;
  --mint: #e0ece1;
  --lavender: #eae4f5;
  --peach: #fbeadd;
  --brand-primary: #287451;
  --brand-hover: #205f43;
  --brand-active: #184b34;
  --brand-soft: var(--mint);
  --text-primary: #253340;
  --text-muted: #53636b;
  --surface-base: #ffffff;
  --surface-elevated: #ffffff;
  --surface-muted: #eaf0ed;
  --surface-alt: #faf7ef;
  --surface-dark: #193e30;
  --forest: #193e30;
  --sage: #839b7e;
  --gold: #b18a4e;
  --gold-soft: #f4ead5;
  --cool-soft: #eaf0f3;
  --line: #d4dfd9;
  --green: var(--brand-primary);
  --green-bright: var(--brand-primary);
  --ink: var(--text-primary);
  --muted: var(--text-muted);
  --border: var(--line);
  --surface: var(--surface-base);
  --surface-soft: var(--surface-muted);
  --font-ui: Vazirmatn, Tahoma, Arial, sans-serif;
  --type-display: clamp(2rem, 4vw, 3.5rem);
  --type-page: clamp(1.65rem, 2.8vw, 2.35rem);
  --type-section: 1.18rem;
  --type-body: 1rem;
  --type-meta: .875rem;
  --type-value: clamp(1.45rem, 2.8vw, 2.1rem);
  --type-control: .9375rem;
  --type-table: .875rem;
  --radius: 22px;
  --shadow: 0 2px 4px #253c3404, 0 12px 32px #253c340a;
  --shadow-raised: 0 16px 48px #253c3414;
}