/* Ringa pages — brand tokens from the Ringa repo (docs/brand.md). */
:root {
    --ringa-bg: #FBF7F2;
    --ringa-surface: #FFFFFF;
    --ringa-ink: #1F2433;
    --ringa-ink-muted: #6B6F7B;
    --ringa-champagne: #B08245;
    --ringa-accent-text: #8A6530;
    --ringa-blush: #F3E3DC;
    --ringa-on-tip: #7F5C2A;
    --ringa-line: #E7DED3;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ringa-bg: #15161C;
        --ringa-surface: #1F2433;
        --ringa-ink: #F4EFE8;
        --ringa-ink-muted: #A6A3A0;
        --ringa-champagne: #D8B67E;
        --ringa-accent-text: #D8B67E;
        --ringa-blush: #3A2B2A;
        --ringa-on-tip: #F3E3DC;
        --ringa-line: #2C3142;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ringa-bg);
    color: var(--ringa-ink);
    font: 400 16px/1.65 'Inter', -apple-system, system-ui, sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--ringa-accent-text); text-underline-offset: 2px; }

.ringa-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.25rem 1rem;
    font-size: 0.9rem;
}

.ringa-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ringa-ink);
    text-decoration: none;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: 1.15rem;
}

.ringa-mark { width: 28px; height: 28px; flex: none; }

.ringa-lang { display: flex; gap: 0.75rem; }
.ringa-lang a { color: var(--ringa-ink-muted); text-decoration: none; }
.ringa-lang a:hover { color: var(--ringa-accent-text); }

main {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

h1, h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    line-height: 1.25;
}

h1 { font-size: 2rem; margin: 1.5rem 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 0.5rem; }
h3 { font-size: 1rem; font-weight: 500; margin: 1.5rem 0 0.25rem; }

.ringa-muted { color: var(--ringa-ink-muted); }

.ringa-card {
    background: var(--ringa-surface);
    border: 1px solid var(--ringa-line);
    border-radius: 16px;
    padding: 1.25rem;
    margin: 1.5rem 0;
}

.ringa-card p, .ringa-tip p { margin: 0; }

.ringa-tip {
    background: var(--ringa-blush);
    color: var(--ringa-on-tip);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.ringa-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding: 0; list-style: none; }

hr {
    margin: 3rem 0;
    border: 0;
    border-top: 1px solid var(--ringa-line);
}

.ringa-footer {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
    border-top: 1px solid var(--ringa-line);
    color: var(--ringa-ink-muted);
    font-size: 0.875rem;
}

.ringa-footer a { color: var(--ringa-ink-muted); }

@media (max-width: 480px) {
    h1 { font-size: 1.65rem; }
}