/* Identidade do painel — estrutura do mockup 09 (mockups/painel.html) com a paleta do app
   (app/www/assets/config.css): papel creme, superfícies brancas, tinta quente.
   Ação forte em oliva escuro; a terracota é o fio de destaque e o mel, o selo. */

* {
    font-optical-sizing: auto;
    font-style: normal;
    font-family: var(--f-ui);
    box-sizing: border-box;
}

:root {
    color-scheme: light only;
    --force-light-mode: true;

    font-size: 16px;

    /* ──────── PAPEL E SUPERFÍCIES ──────── */
    --fundo: #fbf6ea;
    --superficie: #fff;
    --superficie-2: #fffdf7;
    --superficie-3: #f8f2e3;
    --superficie-4: #eef1e0;    /* realce oliva do item ativo */

    /* ──────── TINTA (preto quente do app) ──────── */
    --tinta: #2b2a22;
    --tinta-corpo: #2b2a22;
    --tinta2: #5f5c4e;
    --tinta3: #6f6b5d;
    --tinta4: #7d796b;
    --tinta5: #8a8577;
    --tinta6: #b5b0a0;

    /* ──────── AÇÃO ──────── */
    --oliva-esc: #4d5a2b;
    --oliva-esc-2: #5d6b35;
    --creme: #fffbf0;

    /* ──────── IDENTIDADE, DESTAQUE E ALERTAS ──────── */
    --oliva: #708240;
    --salvia: #abba72;
    --terracota: #df6149;
    --coral: #f49069;
    --mel: #fedc7b;
    --terra-esc: #b8452f;       /* alerta sobre branco */

    --linha: rgba(112, 130, 64, 0.14);
    --linha-2: rgba(77, 90, 43, 0.17);
    --linha-3: rgba(77, 90, 43, 0.28);

    --sombra-s: 0 2px 6px rgba(88, 76, 40, 0.06);
    --sombra-m: 0 10px 24px -8px rgba(88, 76, 40, 0.18), 0 2px 6px rgba(88, 76, 40, 0.06);
    --sombra-g: 0 26px 50px -18px rgba(88, 76, 40, 0.34);

    /* ──────── TIPOGRAFIA (mesma do app) ──────── */
    --f-disp: 'Outfit', system-ui, sans-serif;
    --f-ui: 'Manrope', system-ui, sans-serif;
    --f-dados: 'IBM Plex Mono', ui-monospace, monospace;

    --r-p: 10px;
    --r-m: 13px;
    --r-g: 18px;

    /* ──────── ALIASES DAS TELAS ANTIGAS ──────── */
    --branco: #fff;
    --bg-100: #fff;
    --bg-95: var(--superficie-2);
    --bg-90: var(--fundo);
    --bg-0: #fff;
    --bg-5: var(--superficie-3);
    --bg-10: #efe6cf;
    --borda: var(--linha-2);
    --texto-95: var(--tinta);
    --texto-70: var(--tinta3);
    --texto-50: var(--tinta5);
    --cor1: var(--oliva);
    --cor2: var(--salvia);
    --cor3: var(--terracota);
    --cor4: var(--coral);
    --cor5: var(--mel);
    --radius: var(--r-m);
    --radius-50: var(--r-p);
}

body {
    margin: 0px;
}

.numero,
.dados {
    font-family: var(--f-dados);
    font-style: normal;
}

button, a, input, textarea, select {
    outline: none;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    font-family: var(--f-ui);
}