/* Tema Croproad das páginas de conta: as variáveis --df-* que o df.css do
 * framework lê, com os valores do design system (design-system/web-theme.md).
 * O resto do visual (contorno, lábio, foco, marca) vem de croproad.css e
 * cr-brand.css, ligados pelo fragmento do cabeçalho (T2). */
:root {
    --df-bg: #fff6df;
    --df-surface: #fffcf4;
    --df-text: #3b2414;
    --df-muted: #725238;
    --df-accent: #3a7f1e;
    --df-accent-text: #ffffff;
    --df-border: #a88456;
    --df-error: #b8321a;
    --df-ok: #2f6a16;
    --df-font: Nunito, ui-rounded, "Segoe UI", system-ui, sans-serif;
    --df-font-size: 16px;
    --df-radius: 14px;
    --df-shadow: 0 6px 0 #e6cfa6;
    --df-gap: 16px;
    --df-card-max: 440px;
    --df-touch: 44px;

    /* Tokens do design system (design-system/tokens.json) que os --df-* não cobrem. */
    --cr-bg-deep: #fcebc4;
    --cr-line: #e6cfa6;
    --cr-cream: #fff1d0;
    --cr-white: #ffffff;
    --cr-leaf-100: #e6f5d8;
    --cr-leaf-300: #8fd16a;
    --cr-leaf-800: #24560f;
    --cr-sun-400: #ffc93c;
    --cr-clay-500: #e07b39;
    --cr-sky-100: #e2f2f8;
    --cr-sky-700: #23668a;
    --cr-tomato-100: #fde3d9;
    --cr-off-bg: #efe5d1;
    --cr-off-ink: #a3927a;
    --cr-veil: #3b24146b;
    --cr-grass-300: #8dd467;
    --cr-grass-400: #7cc85a;
    --cr-stroke: 2px;
    --cr-radius-sm: 8px;
    --cr-radius-lg: 22px;
    --cr-touch-lg: 52px;
    --cr-shadow-btn: 0 4px 0 #3b2414;
    --cr-highlight-top: inset 0 3px 0 #ffffff59;
}