/* ============================================================
   Comparei — design tokens
   Paleta: Berinjela (marca), Açafrão (etiqueta de gôndola / ação),
   Menta (economia), Pimenta (alta de preço), Papel térmico (cupom).

   Tema claro é o único automático (design "clean", fundo branco).
   O berinjela é usado como tinta/acento, não como superfície grande.
   Contraste de texto verificado para WCAG AA (≥ 4.5:1) sobre branco
   e sobre --bg.
   ============================================================ */

:root {
    --bg: #F8F7FB;              /* canvas quase branco */
    --surface: #FFFFFF;         /* cards */
    --surface-2: #F5F4F8;
    --surface-sunk: #EFEDF4;
    --ink: #221638;
    --ink-2: #4A3F60;
    --muted: #6E6589;           /* 5.6:1 sobre branco */
    --line: #E7E4EE;            /* bordas finas */
    --line-strong: #D9D5E3;

    --brand: #2B1B45;
    --brand-2: #3D2A5F;
    --on-brand: #FFFFFF;
    --on-brand-muted: #BFB3D6;
    --brand-tint: #F3F0F9;      /* superfície lavanda suave (~6% berinjela) */
    --brand-tint-2: #E8E2F3;    /* borda/realce sobre --brand-tint */
    --brand-soft: color-mix(in srgb, var(--brand) 8%, transparent);

    --tag: #FFD23F;
    --tag-deep: #F5B700;
    --on-tag: #2B1B45;
    --tag-soft: #FFF7D9;        /* superfície açafrão suave */
    --tag-line: #F5E3A3;

    --save: #07785B;            /* 5.5:1 sobre branco */
    --save-soft: #DAF4EB;
    --up: #BF3A1F;              /* 5.5:1 sobre branco */
    --up-soft: #FCE5DF;
    --info: #3F63D8;

    --paper: #FFFFFF;
    --paper-ink: #2A2433;
    --paper-dash: #CFCAD8;

    --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body: "Onest", "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

    --r-xl: 28px;
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 12px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgb(34 22 56 / .05);
    --shadow: 0 1px 2px rgb(34 22 56 / .04), 0 8px 24px -14px rgb(34 22 56 / .14);
    --shadow-lg: 0 24px 56px -24px rgb(34 22 56 / .28);

    --gutter: 20px;
    --nav-h: 76px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --ease-out: cubic-bezier(.2, .8, .2, 1);

    color-scheme: light;
}

/* Tema escuro apenas por opção explícita (nada o ativa hoje).
   Não há mais troca automática por prefers-color-scheme. */
:root[data-theme="dark"] {
    --bg: #120D1A;
    --surface: #1B1526;
    --surface-2: #221A30;
    --surface-sunk: #0D0913;
    --ink: #F3EFFA;
    --ink-2: #D0C7DF;
    --muted: #998FAE;
    --line: #2E2540;
    --line-strong: #3A3050;
    --brand: #2A1A44;
    --brand-2: #3A2760;
    --brand-tint: #221A30;
    --brand-tint-2: #2E2540;
    --tag-soft: #2A2418;
    --tag-line: #4A3F20;
    --save: #3DD6A8;
    --save-soft: rgb(61 214 168 / .14);
    --up: #FF7358;
    --up-soft: rgb(255 115 88 / .14);
    --paper: #F6F4F0;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -16px rgb(0 0 0 / .6);
    color-scheme: dark;
}