/* Design system v0.1. Source palette is immutable; UI roles are separate. */
:root {
  --brand-green: #4d604d;
  --brand-red: #8a3328;
  --brand-limestone: #ede6d8;
  --brand-charcoal: #2e302c;
  --brand-gold: #c19a50;
  --brand-sky: #8ba7c4;
  --brand-brown: #6b4f3a;

  --surface-page: var(--brand-limestone);
  --surface-raised: #fffefa;
  --surface-subtle: #f6f3ec;
  --surface-photo-credit: color-mix(in srgb, var(--surface-raised) 95%, transparent);
  --text: var(--brand-charcoal);
  --text-muted: #606359;
  --border: #cec8bc;
  --border-control: #787c70;
  --action-primary: var(--brand-green);
  --action-hover: #3d503d;
  --action-active: #314231;
  --action-secondary: var(--brand-green);
  --action-text: #fffefa;
  --link: var(--brand-green);
  --focus: #255e85;
  --success: #28604b;
  --success-surface: #eaf3ed;
  --warning: #765315;
  --warning-surface: #faf0d9;
  --error: #9b293e;
  --error-surface: #fbeef0;
  --info: #285c7b;
  --info-surface: #eaf1f7;
  --surface-dark: var(--brand-charcoal);
  --text-on-dark: var(--brand-limestone);
  --link-on-dark: #e3c58c;

  /* No font request is made until licensed, approved local assets are added. */
  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-small: 0.875rem;
  --text-base: 1rem;
  --text-large: 1.125rem;
  --heading-1: clamp(2rem, 4vw, 3.15rem);
  --heading-2: clamp(1.45rem, 2.35vw, 2rem);
  --heading-3: clamp(1.25rem, 2vw, 1.5rem);
  --heading-board: clamp(1.875rem, 4vw, 2.75rem);
  --leading-body: 1.6;
  --leading-ui: 1.4;
  --leading-heading: 1.2;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --content-width: 72rem;
  --workspace-width: 72rem;
  --board-workspace-width: 62rem;
  --board-sidebar-width: 13.5rem;
  --board-surface-page: #fbfaf6;
  --board-surface-highlight: #f0f2e9;
  --board-surface-active: #e8ede4;
  --board-border: #dedbd1;
  --board-radius: 0.625rem;
  --board-home-hero-height: 14rem;
  --board-home-section-gap: 1.25rem;
  --board-home-grid-gap: 1rem;
  --board-home-surface-radius: 0.5rem;
  --form-width: 48rem;
  --prose-width: 68ch;
  --gutter: clamp(1rem, 3vw, 2rem);
  --border-width: 1px;
  --border-strong: 2px;
  --radius-small: 0.125rem;
  --radius-panel: 0.25rem;
  --control-height: 2.75rem;
  --focus-width: 3px;
  --focus-offset: 3px;
  --shadow-focus: 0 0 0 3px var(--surface-raised);

  /* Compatibility for existing templates and F4; new components use roles above. */
  --color-canvas: var(--surface-page);
  --color-paper: var(--surface-raised);
  --color-ink: var(--text);
  --color-muted: var(--text-muted);
  --color-red: var(--brand-red);
  --color-red-dark: var(--brand-red);
  --color-moss: var(--action-primary);
  --color-moss-dark: var(--link);
  --color-line: var(--border);
  --color-border: var(--border);
  --color-focus: var(--focus);
}

/* Public editorial scale; the board keeps its operational heading sizes. */
.public-ui {
  --heading-1: clamp(1.75rem, 3.2vw, 2.625rem);
  --heading-2: clamp(1.3rem, 2vw, 1.75rem);
  --heading-3: clamp(1.125rem, 1.7vw, 1.375rem);
  --home-intro-heading: clamp(1.75rem, 2.5vw, 2.25rem);
  --home-intro-lead: clamp(1.125rem, 1.6vw, 1.25rem);
}