:root
{
    --font: system-ui, sans-serif;
    --bg: #f7f6f4;
    --ink: #1c1b21;
    --ink-soft: #3a3940;
    --ink-strong: #000000;
    --accent: #c23c68;
    --accent-dark: #a52f56;
    --accent-tint: #f9e6ed;
    --on-accent: #ffffff;
    --muted: #55545a;
    --faint: #6a696f;
    --card: #ffffff;
    --stone: #f2f1ec;
    --wash-warm: #fbe4ec;
    --wash-sand: #f6ece4;
    --lang-bg: #eae9e5;
    --header-bg: color-mix(in srgb, var(--bg) 85%, transparent);
    --line: rgba(28, 27, 33, 0.09);
    --line-strong: rgba(28, 27, 33, 0.28);
    --on-dark: #f7f6f4;
    --on-dark-muted: #a9a8ae;
    --on-dark-soft: #cfced4;
    --radius: 28px;
    --radius-md: 26px;
    --radius-sm: 24px;
    --page: 1240px;
    --gutter: clamp(20px, 5vw, 40px);
    --frame: clamp(12px, 2vw, 20px);
    --band: clamp(52px, 7vw, 88px);
    --gap-card: 12px;
}

*,
*::before,
*::after
{
    box-sizing: border-box;
}

html
{
    font-size: 14px;
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
}

body
{
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

h1,
h2
{
    margin: 0;
    font-weight: 700;
}

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

a:hover
{
    color: var(--accent-dark);
}

.btn
{
    display: inline-block;
    font: inherit;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-accent
{
    background: var(--accent);
    color: var(--on-accent);
    padding: 16px 34px;
    font-size: 1rem;
}

.btn-accent:hover
{
    background: var(--accent-dark);
    color: var(--on-accent);
}

.btn-ink
{
    background: var(--ink);
    color: var(--on-dark);
    padding: 10px 20px;
    font-size: 0.88rem;
}

.btn-ink:hover
{
    background: var(--ink-strong);
    color: var(--on-dark);
}