/* OITO III — tokens web v1.0 · fonte: Manual Web OITO III */
:root {
    /* Cor */
    --o3-paper: #F4F2EA;
    --o3-paper-2: #F2EFE9;
    --o3-ink: #111111;
    --o3-black: #0A0A0A;
    --o3-night: #141414;
    --o3-smoke: #080808;
    --o3-photo: #1A1A1A;

    /* Texto — modo claro */
    --o3-t1: #111111;
    --o3-t2: rgba(0, 0, 0, .52);
    --o3-t3: rgba(0, 0, 0, .36);
    --o3-t4: rgba(0, 0, 0, .20);
    --o3-line: rgba(0, 0, 0, .10);
    --o3-hover: rgba(17, 17, 17, .04);

    /* Tipografia */
    --o3-font: 'AcuminPro', 'Helvetica Neue', Arial, sans-serif;
    --o3-fs-display-xl: clamp(56px, 10.8vw, 156px);
    --o3-fs-display: clamp(40px, 5.6vw, 81px);
    --o3-fs-h2: clamp(44px, 6vw, 86px);
    --o3-fs-h3: 20px;
    --o3-fs-lead: 17px;
    --o3-fs-body: 14px;
    --o3-fs-list: 13px;
    --o3-fs-label: 10px;
    --o3-fs-micro: 9px;

    /* Tracking */
    --o3-ls-display: -0.05em;
    --o3-ls-h2: -0.04em;
    --o3-ls-h3: -0.03em;
    --o3-ls-label: 0.26em;
    --o3-ls-button: 0.2em;

    /* Layout */
    --o3-pad-x: 24px;
    --o3-nav-h: 80px;
    --o3-max: 1440px;
    --o3-section-y: 80px;
    --o3-radius: 0;

    /* Movimento */
    --o3-ease: cubic-bezier(.16, 1, .3, 1);
    --o3-dur-fast: 250ms;
    --o3-dur-reveal: 900ms;
}

@media (min-width: 768px) {
    :root {
        --o3-pad-x: 40px;
        --o3-section-y: 192px;
    }
}

.o3-dark {
    --o3-t1: #F4F2EA;
    --o3-t2: rgba(244, 242, 234, .68);
    --o3-t3: rgba(244, 242, 234, .50);
    --o3-t4: rgba(244, 242, 234, .32);
    --o3-line: rgba(255, 255, 255, .12);
    --o3-hover: rgba(255, 255, 255, .04);

    background: var(--o3-night);
    color: var(--o3-t1);
}