/* ==========================================================================
Brot — Design tokens (v8 · identidade "C · Brot")
Território: uma padaria alemã numa manhã tranquila. Estrutura limpa e
contemporânea, materiais aconchegantes (farinha, crosta, azulejo, toldo).
Paleta de dia ("Tag"):
Mehl #F5F0E6 farinha — o fundo
Fliese #FBF9F3 azulejo claro — cartões e superfícies
Kaffee #493B32 café — texto e contornos (nunca preto)
Kruste #B97943 crosta — destaque quente, ilustrações
Ofen #8E5A2E forno — ação primária (texto claro sobre ele: 5,5:1)
Salbei #89947A sálvia — toldo, estados calmos
Butter #E9D99A manteiga — seleção, realces
Himmel #C9DCDD céu da manhã — janelas, informação
Apfel #B5483A maçã — favoritos e o ponto de geleia
Contrastes sobre Mehl: ink 9,5 · ink-soft 5,8 · ink-faint 5,0 · Ofen 5,1.
Noite ("Nacht"): a padaria fechou, mas a luz da cozinha ficou acesa.
Azul profundo, verde de azulejo escuro e luz âmbar. Ver o bloco [data-theme="dark"].
========================================================================== */
:root{
/* ---- Paleta da marca (valores fixos, iguais de dia e de noite) */
--mehl: #F5F0E6;
--fliese: #FBF9F3;
--kaffee: #493B32;
--kruste: #B97943;
--ofen: #8E5A2E;
--ofen-dk: #6B4220;
--salbei: #89947A;
--butter: #E9D99A;
--himmel: #C9DCDD;
--apfel: #B5483A;
--teig: #EBD9B4; /* massa crua */
--krume: #F3E3BF; /* miolo */
/* nomes antigos que outros arquivos ainda usam — apontam para a paleta nova */
--tin: var(--ofen);
--tin-deep: var(--ofen-dk);
--crust: var(--kruste);
--crust-dk: #8E5A2E;
--jam: var(--apfel);
--pistache: var(--salbei);
--cocoa: var(--kaffee);
--dough: var(--mehl);
/* ---- Papéis (dia) */
--paper: #F5F0E6;
--paper-sunken: #EDE5D3;
--paper-raised: #FBF9F3;
--ink: #493B32;
--ink-soft: #6B5A4D;
--ink-faint: #776455;
--hairline: #E2D8C4;
--hairline-strong: #CDBFA6;
--line: #493B32; /* contorno de ilustração: cartões e botões de destaque */
--pop: #493B32; /* "tecla": a borda de baixo dos botões */
--accent: #8E5A2E; /* Ofen — ação primária */
--accent-press: #6B4220;
--accent-ink: #FBF9F3;
--accent-soft: #F1E3CF;
--teal-ink: #7A4C25; /* (nome antigo) texto de links e estados */
--sky-soft: #E3EEEE;
--teal: #8E5A2E;
--sky: #C9DCDD;
--sage: #DDE3D3;
--sage-ink: #5F6B52;
--mist: #EDE5D3;
--cream: #F5F0E6;
--petrol: #493B32;
--gold: #E9D99A;
--ember: #B5483A;
--plum: #A8402F; /* (nome antigo) = maçã: favoritos, destaques quentes */
--plum-soft: #F4DDD5;
--warm: var(--plum);
--warm-soft: var(--plum-soft);
--butter-soft: #F3EBC8;
--ok: #4F6B45;
--ok-soft: #DDE6D2;
--danger: #9A3B2F;
--danger-soft: #F6DED6;
/* superfícies "da padaria" */
--tile: #E6EADD; /* azulejo da parede */
--tile-line: #C9D1BC;
--wood: #B8834F; /* balcão */
--wood-top: #A87B4F;
--wood-dk: #8E5A2E;
--awning-a: #89947A; /* listras do toldo */
--awning-b: #F5F0E6;
--awning-img: url("data:image/svg+xml;utf8,");
--window: #C9DCDD; /* céu na janela */
--glow: rgba(233, 162, 77, 0); /* luz da lâmpada (só à noite) */
--art-line: #5B4234; /* contorno das ilustrações */
/* barra lateral */
--tin-bg: #FBF9F3;
--tin-fg: #493B32;
--tin-dim: #6B5A4D;
--grain-opacity: .35;
/* ---- Grifos: cores de marca-texto, translúcidas sobre o papel */
--hl-yellow: rgba(233, 205, 110, .45);
--hl-green: rgba(137, 160, 112, .38);
--hl-blue: rgba(124, 170, 186, .40);
--hl-pink: rgba(214, 128, 120, .36);
--hl-purple: rgba(150, 120, 176, .34);
--sw-yellow: #D6B54E;
--sw-green: #7E9467;
--sw-blue: #6C9DAE;
--sw-pink: #C9776B;
--sw-purple: #8A6CA8;
/* ---- Tipografia */
--font-display: 'Young Serif', Georgia, serif;
--font-reading: 'Newsreader', 'Iowan Old Style', Georgia, serif;
--font-ui: 'Albert Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
--fs-hero: clamp(2.1rem, 1.6rem + 2vw, 3rem);
--fs-h1: 1.85rem;
--fs-h2: 1.36rem;
--fs-h3: 1.08rem;
--fs-body: 1rem;
--fs-reading: 1.2rem;
--fs-small: 0.86rem;
--fs-micro: 0.75rem;
--measure: 66ch;
/* ---- Espaçamento (escala 4px) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-pill: 999px;
--shadow-modal: 0 3px 0 var(--pop), 0 24px 40px -18px rgba(73, 59, 50, .45);
--shadow-pop: 0 3px 0 var(--pop);
/* movimento: 180–250 ms, poucos pixels, só opacidade e posição */
--dur-fast: 180ms;
--dur-base: 240ms;
--dur-theme: 600ms;
--ease: cubic-bezier(.33, 0, .2, 1);
}
/* ---- Nacht: a padaria fechou; azul profundo, azulejo verde-escuro, luz âmbar.
O tema é sempre resolvido em JS (Tag/Nacht/automático) e gravado em data-theme. */
:root[data-theme="dark"]{
--paper: #131B27;
--paper-sunken: #0E141D;
--paper-raised: #1B2533;
--ink: #F0E5CD;
--ink-soft: #C7BBA3;
--ink-faint: #A69B87;
--hairline: #263243;
--hairline-strong: #364559;
--line: #4A5B71;
--pop: #070B11;
--accent: #E8A84A; /* Lampe — luz âmbar */
--accent-press: #B47A28;
--accent-ink: #1A1309;
--accent-soft: #2E2817;
--teal-ink: #F0BE6E;
--sky-soft: #1C2B3A;
--sage: #1D2F29;
--sage-ink: #9DC0A8;
--mist: #0E141D;
--plum: #F08A78;
--plum-soft: #3A2023;
--butter-soft: #2E2817;
--ok: #9DC0A8;
--ok-soft: #1D2F29;
--danger: #FF9C84;
--danger-soft: #3E211A;
--tile: #172823;
--tile-line: #1F362F;
--wood: #5E4430;
--wood-top: #6E5038;
--wood-dk: #3F2D20;
--awning-a: #2B4A3D;
--awning-b: #3A4658;
--awning-img: url("data:image/svg+xml;utf8,");
--window: #0F1A2E;
--glow: rgba(233, 162, 77, .55);
--art-line: #0A0F16;
--tin-bg: #182230;
--tin-fg: #F0E5CD;
--tin-dim: #B9AE98;
--grain-opacity: .22;
--hl-yellow: rgba(233, 190, 90, .30);
--hl-green: rgba(120, 170, 130, .30);
--hl-blue: rgba(100, 160, 210, .32);
--hl-pink: rgba(224, 120, 110, .32);
--hl-purple: rgba(160, 130, 210, .32);
--shadow-modal: 0 3px 0 var(--pop), 0 24px 44px -16px rgba(0,0,0,.7);
}