@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

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

:root {
    --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

    --musgo: #4d6e42;
    --musgo-claro: #8fad82;
    --terra: #c8b08a;
    --creme: #f2ebe0;
    --folha-escura: #141c12;
    --orvalho: #dce8d4;
    --luz-dourada: #e2c97a;
    --luz-dourada-suave: rgba(226, 201, 122, 0.18);
    --texto-principal: rgba(242, 235, 224, 0.95);
    --texto-secundario: rgba(242, 235, 224, 0.72);
    --texto-discreto: rgba(242, 235, 224, 0.48);
    --borda-suave: rgba(242, 235, 224, 0.12);
    --borda-dourada: rgba(226, 201, 122, 0.35);
    --vidro: rgba(18, 24, 16, 0.55);
    --vidro-hover: rgba(226, 201, 122, 0.08);
    --papel: #ebe3d4;
    --papel-escuro: #ddd4c3;
    --papel-verso: #d4cbb8;
    --tinta: #2a241c;
    --tinta-suave: #5c5348;
    --sombra-profunda: 0 24px 64px rgba(8, 12, 6, 0.45);
    --sombra-livro: 0 32px 80px rgba(8, 12, 6, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);
    --transicao: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transicao-virar: 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
}

body {
    font-family: var(--font-body);
    min-height: 100vh;
    color: var(--creme);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--folha-escura);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 15% 50%, rgba(77, 110, 66, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 50% 80% at 100% 0%, rgba(226, 201, 122, 0.08) 0%, transparent 50%),
        linear-gradient(105deg, rgba(12, 16, 10, 0.92) 0%, rgba(18, 26, 14, 0.78) 45%, rgba(12, 16, 10, 0.55) 100%);
    z-index: 0;
    pointer-events: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(8, 10, 6, 0.55) 100%);
    z-index: 0;
    pointer-events: none;
}

.fonte-display {
    font-family: var(--font-display);
}

.fonte-mono {
    font-family: var(--font-mono);
}