:root {
    --color-bg: #121510;
    --color-surface: #1b2019;
    --color-ink: #e7e2d7;
    --color-muted: #cbc4b6;
    --color-accent: #d7a84f;
    --color-accent-2: #7fc7a4;
    --color-accent-3: #c782a6;
    --color-profile-listener: #ff6b6b;
    --color-profile-artist: #9bc3ff;
    --color-line: #4c5548;
    --color-input-bg: rgba(19, 23, 17, 0.82);
    --color-button-text: #121a10;
    --bg-grad-start: #1a2018;
    --bg-grad-mid: var(--color-bg);
    --bg-grad-end: #0d100c;
    --hero-grad-1: #283125;
    --hero-grad-2: #161b14;
    --hero-grad-3: #323d2d;
    --texture-line: rgba(137, 165, 110, 0.18);
    --shadow-soft: 0 22px 70px rgba(0, 0, 0, 0.24);

    --nav-color-services: #d7a84f;
    --nav-color-radio: #ff6b6b;
    --nav-color-community: #ff6b6b;
    --nav-color-blog: #a4bdd9;
    --nav-color-about: #e0b98e;
    --nav-color-contact: #9bc3ff;

    --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", serif;
    --font-body: "Instrument Sans", "Avenir Next", "Segoe UI", sans-serif;

    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6.5rem;

    --content-wide: min(90rem, 92vw);
    --content-narrow: min(52rem, 90vw);

    --transition-base: 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="light"] {
    --color-bg: #f3efe7;
    --color-surface: #e9e3d8;
    --color-ink: #21201d;
    --color-muted: #47443d;
    --color-accent: #9b6a1c;
    --color-accent-2: #347c65;
    --color-accent-3: #9b4e75;
    --color-profile-listener: #cf4f67;
    --color-profile-artist: #467fc9;
    --color-line: #c9c1b4;
    --color-input-bg: rgba(255, 255, 255, 0.35);
    --color-button-text: #f4f2ec;
    --bg-grad-start: #f8f4ee;
    --bg-grad-mid: var(--color-bg);
    --bg-grad-end: #ece6da;
    --hero-grad-1: #dfd8cb;
    --hero-grad-2: #f5f1ea;
    --hero-grad-3: #d7cfbf;
    --texture-line: rgba(95, 111, 74, 0.12);
    --shadow-soft: 0 22px 70px rgba(63, 52, 36, 0.16);
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: radial-gradient(circle at 10% 0%, var(--bg-grad-start) 0%, var(--bg-grad-mid) 45%, var(--bg-grad-end) 100%);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    transition: background var(--transition-base), color var(--transition-base);
}

.site-main {
    flex: 1 0 auto;
}

a,
button,
input,
textarea,
select,
summary {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--color-ink);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--color-accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.06;
    text-wrap: balance;
}

h1 {
    font-size: clamp(1.8rem, 1.15rem + 1.8vw, 3.6rem);
}

h2 {
    font-size: clamp(1.5rem, 1.08rem + 1.25vw, 2.45rem);
}

p {
    margin: 0 0 var(--space-m);
       color: var(--color-muted);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

::selection {
    background: color-mix(in srgb, var(--color-accent) 28%, transparent);
    color: var(--color-ink);
}