:root {
    --debug-padding: 25px;

    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    --grid-gap: var(--space-3xl);
    --layout-gap: var(--space-xl);

    --color-text: #111;
    --color-text-muted: #444;
    --color-surface-muted: #ddd;
    --color-border: #ddd;

    --theme-color-orange: #fc713a;
    --theme-color-white: whitesmoke;
    --theme-color-violet: rgba(143, 31, 255, 0.799);
    --theme-color-black: rgb(33, 33, 33);

    /* playground redesign: black hero/reviews, light everywhere else, orange + violet as the accent pair */
    --color-ink: #1d1712;
    --color-ink-2: #1e1811;
    --color-ink-3: #251e15;
    --color-cream: #ece3d2;
    --color-muted-warm: #9c9284;
    --color-peach: #fff4ee;
    --color-violet-soft: #f2e9ff;
    --color-surface: #ffffff;

    --radius-md: 15px;
    --radius-organic: 3px 14px 4px 12px / 12px 4px 14px 3px;
    --content-max-width: 80rem;
    --card-max-width: 30rem;

    --font-heading: "League Gothic", sans-serif;
    --font-body: "Barlow Semi Condensed", sans-serif;
    --font-title: "Berkshire Swash", cursive;

    --text-h1: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);
    --text-h2: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
    --text-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --text-lead: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    --text-body: 1rem;
    --text-small: 0.875rem;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.5;
    color: var(--theme-color-black);
    background: var(--theme-color-white);
}

main {
    flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 1px;
}

h1 {
    font-size: var(--text-h1);
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
}

section {
    padding-block: var(--space-3xl);
}