/*   CSS FILE HEADER #
 *
 *   File:         [tokens.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['12.10.2026']
 *   Version:      ['0.1.0']
 *   Description:  ['Design tokens of the sheet (docs/ficha2/DESIGN.md) as --e-* custom properties: ink, paper, leather, metal, wax, mana, spacing, radii, sepia shadows lit from the top-left candle, motion. Loaded before ficha.css; the --e- prefix never collides with tema.css/grimorio.css.']
 */

:root {
    /* ink on light parchment */
    --e-tinta: #3a2414;
    --e-tinta-suave: #5c4629;
    --e-tinta-apagada: #7a6446;          /* lightest ink allowed for text */
    --e-tinta-vermelha: #b0261b;
    --e-tinta-azul: #23407a;             /* MP and only MP */
    /* paper */
    --e-papiro: #e9dab3;
    --e-papiro-claro: #f3e7c6;
    --e-papiro-sombra: #cdb88a;
    --e-papel-borda: #b99a64;
    --e-pauta: rgba(58, 36, 20, .35);
    /* leather and wood */
    --e-couro-castanho: #6b4426;
    --e-couro-negro: #2c221d;
    --e-couro-vinho: #5e1d26;
    --e-couro-musgo: #364628;
    --e-couro-anil: #23345a;
    --e-madeira: #2a1a10;
    /* metal */
    --e-ouro-claro: #f3d98e;
    --e-ouro: #d9b25a;
    --e-ouro-tinta: #a47a22;
    --e-ouro-escuro: #6d4f17;
    /* wax */
    --e-cera: #8e1b1b;
    --e-cera-luz: #c4483c;
    --e-cera-ouro: #b8862b;
    --e-cera-violeta: #5b3a8c;
    /* magic */
    --e-mana: #6a3fd6;
    --e-mana-claro: #c9adff;
    /* states, always in ink */
    --e-ok: #2d6a3c;
    --e-aviso: #85520f;
    --e-perigo: #9c2b22;
    /* silk of the ribbons: one table for the sheet and the grimoire, tema.css --fita-* */

    /* type */
    --e-fonte-texto: 'IM Fell English', Georgia, serif;
    --e-fonte-titulo: 'Dalingia', 'IM Fell English', serif;
    --e-fonte-fita: 'IM Fell English SC', 'IM Fell English', Georgia, serif;
    --e-rotulo: italic 1em/1.3 var(--e-fonte-texto);
    --e-legenda: italic 13px/1.35 var(--e-fonte-texto);

    /* spacing (base 4px) */
    --e-esp-1: 4px;
    --e-esp-2: 8px;
    --e-esp-3: 12px;
    --e-esp-4: 16px;
    --e-esp-5: 24px;
    --e-esp-6: 32px;
    --e-esp-7: 48px;
    --e-esp-8: 64px;

    /* radii: paper is not rounded */
    --e-raio-papel: 2px;
    --e-raio-controle: 4px;
    --e-raio-aba: 4px 4px 0 0;

    /* shadows: one candle, top-left; sepia on parchment, black only on wood */
    --e-sombra-papel: 0 1px 0 rgba(255, 248, 228, .5) inset, 0 1px 2px rgba(58, 34, 10, .18), 0 4px 10px rgba(58, 34, 10, .12);
    --e-sombra-erguido: 0 2px 4px rgba(58, 34, 10, .22), 0 12px 28px rgba(58, 34, 10, .24);
    --e-sombra-madeira: 0 2px 3px rgba(0, 0, 0, .55), 0 18px 40px rgba(0, 0, 0, .5);
    --e-sombra-popover: 0 1px 0 rgba(255, 248, 228, .6) inset, 0 3px 6px rgba(58, 34, 10, .25), 0 16px 34px rgba(30, 16, 4, .35);
    --e-sombra-poco: inset 0 1px 3px rgba(58, 34, 10, .25);
    --e-brilho-ouro: 0 0 0 1px rgba(243, 217, 142, .5), 0 0 14px rgba(240, 200, 100, .45);
    --e-foco: 0 0 0 2px var(--e-papiro), 0 0 0 4px var(--e-tinta-vermelha);

    /* motion */
    --e-dur-toque: 120ms;
    --e-dur-rapido: 200ms;
    --e-dur-base: 320ms;
    --e-dur-papel: 550ms;
    --e-ease-tinta: cubic-bezier(.2, .8, .2, 1);
    --e-ease-papel: cubic-bezier(.33, 1, .68, 1);
    --e-ease-peso: cubic-bezier(.55, 0, .75, .3);

    /* named layers */
    --e-z-fitas: 3;
    --e-z-flutuantes: 950;
    --e-z-toast: 1000;
}

/* on the bathed (dark) sheets the ink turns into pale light */
[data-tom="escuro"] {
    --e-tinta: #ecdcb6;
    --e-tinta-suave: #d8c59c;
    --e-tinta-apagada: #bba87f;
    --e-tinta-vermelha: #ff7b6b;
    --e-tinta-azul: #9cc0ff;
    --e-pauta: rgba(236, 220, 182, .35);
    --e-foco: 0 0 0 2px rgba(10, 4, 20, .9), 0 0 0 4px #ff7b6b;
}