/* Paititi — Color system
 * Palette extracted from the original Squarespace theme: warm near-black ink,
 * a muted plum accent, deep aubergine dark bands and a pale lavender section
 * surface. The semantic aliases below are what components and pages consume. */

:root {
  /* ---- Brand base (from Squarespace tweak vars) ---- */
  --ms-ink: #210416;         /* black-hsl 322.76,78%,7% — headings, dark bands, icons. */
  --ms-support: #A08FB0;     /* Support. Section bands, decoration. Never as text. */
  --ms-surface: #F1EAF6;     /* lightAccent — page sections, panels, cards. */
  --ms-text: #33202C;        /* Text. All body copy. */
  --ms-white: #FFFFFF;       /* Space. Default page background. */

  /* ---- Accents ---- */
  --ms-highlight: #C9A7E0;   /* Highlight/underline/fill with ink text on top. */
  --ms-accent: #584364;      /* accent-hsl 278,20%,33% — works as a button color, AA on white. */
  --ms-accent-soft: #D9CCE5; /* Muted lavender fill with dark text. */

  /* ---- Tints & shades (derived, for hovers/borders/surfaces) ---- */
  --ms-ink-hover: #14020D;        /* darker ink — button hover */
  --ms-ink-tint-12: rgba(33, 4, 22, 0.12);
  --ms-ink-tint-06: rgba(33, 4, 22, 0.06);
  --ms-support-tint-20: rgba(160, 143, 176, 0.20);
  --ms-accent-hover: #2A1736;     /* darkAccent — button hover */
  --ms-surface-deep: #E0D5EA;     /* borders on surface, hairlines */

  /* ---- Semantic aliases ---- */
  --surface-page: var(--ms-white);
  --surface-section: var(--ms-surface);
  --surface-card: var(--ms-white);
  --surface-inverse: #2A1736;     /* darkAccent — footer, hero bands */
  --surface-band: var(--ms-support);

  --text-heading: var(--ms-ink);
  --text-body: var(--ms-text);
  --text-muted: #6E5B72;          /* text lightened — captions, meta */
  --text-inverse: var(--ms-white);
  --text-on-accent: var(--ms-white);

  --border-subtle: var(--ms-surface-deep);
  --border-strong: var(--ms-ink);
  --border-focus: var(--ms-accent);

  --accent-primary: var(--ms-accent);       /* primary CTA */
  --accent-primary-hover: var(--ms-accent-hover);
  --accent-highlight: var(--ms-highlight);  /* underlines, marks */
  --accent-quiet: var(--ms-accent-soft);

  --focus-ring: rgba(88, 67, 100, 0.40);
}