@import url("https://fonts.googleapis.com/css2?family=DynaPuff:wght@400;700&display=swap");

:root {
    --bg: #d6b7ff;
    --surface: rgba(255, 250, 244, 0.96);
    --surface-soft: #f7edff;
    --accent: #6e3e92;
    --accent-soft: #b98be6;
    --warm: #d69c69;
    --cream: #fff5ed;
    --text: #2c1f35;
    --muted: #73617a;
    --muted-contrast: #4b3b4f; /* updated: darker for AA contrast */
    --muted-strong: #4b3b4f;
    --border: rgba(122, 80, 143, 0.16);
    --header-bg: rgba(122, 80, 143, 0.18);
    --shadow: 0 24px 50px rgba(110, 61, 155, 0.11);
    --highlight: #efe0ff;
}

body {
    background: var(--bg);
    font-family:
        "Open Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color: var(--text);
    font-size: 16px;
    line-height: 1.75;
}
h1,
h2,
h3,
.title,
.header,
.list-title {
    font-family: "DynaPuff", Georgia, serif;
    font-weight: 500;
    color: var(--text);
    line-height: 1.05;
}

h1,
.title {
    font-size: clamp(2.2rem, 3vw, 3rem);
    font-weight: 700;
}

h2,
.header {
    font-size: clamp(1.9rem, 2.4vw, 2.4rem);
    font-weight: 600;
    line-height: 1.08;
}

h3,
.list-title {
    font-size: 1.15rem;
    font-weight: 500;
}

.site-header {
    background: var(--header-bg);
}

.btn {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
}