:root {
  /* Core Miastivo palette */
  --brand-paper: #FCF8F4;
  --brand-white: #FFFFFF;
  --brand-dark: #291D35;
  --brand-ink: #2F2138;
  --brand-muted: #776B79;
  --brand-muted-dark: #C9B8CD;
  --brand-border: #E8DBE5;
  --brand-soft: #F5EBF5;
  --brand-plum: #813F99;
  --brand-plum-hover: #6D3582;
  --brand-plum-dark: #5C2D6E;
  --brand-coral: #F5776C;
  --brand-apricot: #F7A477;
  --brand-orchid: #A852A0;
  --brand-action: #D43F5A;
  --brand-action-hover: #B9344D;
  --brand-action-dark: #FF806D;
  --brand-focus: #813F9980;
  --brand-success: #26715A;

  /* Shared layout and component scales. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-control: 0.625rem;
  --radius-card-compact: 0.875rem;
  --radius-card: 1rem;
  --radius-panel: 1.25rem;
  --radius-pill: 999px;
  --control-height: 2.75rem;
  --control-height-large: 3rem;
  --shadow-card: 0 10px 30px #291D3514;
  --shadow-overlay: 0 24px 70px #190D1738;
  --motion-fast: 140ms;
  --motion-standard: 180ms;
  --motion-slow: 240ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --content-width: 78rem;
  --reading-width: 56.25rem;

  /* Semantic roles shared by CSS and Tailwind. */
  --color-primary: var(--brand-action);
  --color-primary-hover: var(--brand-action-hover);
  --color-secondary: var(--brand-plum);
  --color-secondary-hover: var(--brand-plum-hover);
  --color-text: var(--brand-ink);
  --color-muted: var(--brand-muted);
  --color-surface: var(--brand-white);
  --color-background: var(--brand-paper);
  --color-border: var(--brand-border);
  --color-focus: var(--brand-focus);
  --color-success: var(--brand-success);

  /* Compatibility aliases for existing page-level styles. */
  --paper: var(--color-background);
  --white: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-border);
  --plum: var(--color-secondary);
  --soft: var(--brand-soft);
  --coral: var(--brand-coral);
  --green: var(--color-success);
  --shadow: var(--shadow-card);
}