:root {
  /* Core palette — pastel glamour */
  --color-bg: #fefcfd;
  --color-surface: #f9f4f7;
  --color-surface-2: #f3ecf0;
  --color-card: #ffffff;
  --color-line: #ddd0d8;

  --color-ink: #332a30;
  --color-ink-soft: #5e535a;
  --color-meta: #8a7d85;

  --color-sage: #c9a0c9;
  --color-sage-deep: #a87ba8;
  --color-sage-light: #dfc4df;

  --color-overlay: rgba(51, 42, 48, 0.06);
  --color-overlay-strong: rgba(51, 42, 48, 0.12);
  --color-white: #ffffff;

  /* Legacy aliases */
  --color-primary: var(--color-sage-deep);
  --color-primary-light: var(--color-sage);
  --color-primary-dark: var(--color-ink);
  --color-accent: var(--color-sage);
  --color-accent-subtle: rgba(201, 160, 201, 0.08);
  --color-accent-hover: var(--color-sage-deep);
  --color-pink-hover: var(--color-sage-light);
  --color-bg-alt: var(--color-surface);
  --color-bg-warm: var(--color-surface-2);
  --color-text: var(--color-ink-soft);
  --color-text-dark: var(--color-ink);
  --color-muted: var(--color-meta);
  --color-muted-light: color-mix(in srgb, var(--color-meta) 74%, white);
  --color-border: var(--color-line);
  --color-border-light: color-mix(in srgb, var(--color-line) 62%, white);

  /* Typography */
  --font-body: 'Lato', system-ui, sans-serif;
  --font-heading: 'Raleway', system-ui, sans-serif;
  --font-logo: 'Raleway', system-ui, sans-serif;
  --font-meta: 'Lato', system-ui, sans-serif;

  --font-size-display: clamp(1.7rem, 3vw, 2.6rem);
  --font-size-h1: clamp(1.45rem, 2.4vw, 2.1rem);
  --font-size-h2: clamp(1.2rem, 1.9vw, 1.6rem);
  --font-size-h3: clamp(1.02rem, 1.4vw, 1.25rem);
  --font-size-body-lg: 1.05rem;
  --font-size-body: 0.95rem;
  --font-size-meta: 0.78rem;

  --line-height-display: 1.1;
  --line-height-heading: 1.2;
  --line-height-body: 1.78;
  --letter-spacing-meta: 0.08em;

  /* Layout & spacing */
  --max-width: min(1240px, calc(100vw - 32px));
  --max-width-reading: min(760px, calc(100vw - 32px));
  --gap: clamp(1.25rem, 2vw, 1.75rem);
  --section-space: clamp(4rem, 8vw, 9rem);
  --section-space-tight: clamp(3rem, 5vw, 5.5rem);
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;

  /* Radius & shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* Motion & states */
  --transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  --focus-ring: 0 0 0 3px rgba(201, 160, 201, 0.22);
}

@supports not (color: color-mix(in srgb, black 50%, white)) {
  :root {
    --color-muted-light: #9a8d94;
    --color-border-light: #e8dce4;
  }
}