:root {
  /* Base palette — exact values from szmigiel.design (css/main.css) */
  --plum: #3E2456;       /* rgb(62,36,86) — primary brand color, headings, nav */
  --orange: #EE7100;     /* rgb(238,113,0) — accent, CTA, hover, underline highlight */
  --orange-light: #F89E6A; /* gradient stop used in logo/brace-mark gradients */
  --sand: #FDFCF8;       /* rgb(253,252,248) — warm off-white section background */
  --white: #FFFFFF;
  --ink: #111111;        /* rgb(17,17,17) — body text */
  --gray-666: #666666;   /* secondary text, borders */
  --gray-333: #333333;   /* button-text small caption */
  --gray-border: #DFDFDF; /* stylesheet-part divider */
  --accent-violet: #A375FF; /* rare accent seen in template eyebrow labels */

  /* Semantic aliases */
  --surface-page: var(--white);
  --surface-section-alt: var(--sand);
  --surface-card: var(--white);
  --surface-inverse: var(--plum);

  --text-body: var(--ink);
  --text-heading: var(--plum);
  --text-muted: var(--gray-666);
  --text-caption: var(--gray-333);
  --text-inverse: var(--white);
  --text-eyebrow: var(--plum);

  --border-default: var(--gray-666);
  --border-subtle: var(--gray-border);
  --border-focus: var(--orange);

  --brand-primary: var(--orange);
  --brand-primary-hover: var(--plum);
  --brand-secondary: var(--plum);

  --link-underline: var(--orange);
}