/* ========================================================================== BíbliaTeca — design tokens Fase 1: estrutura/tipografia clonadas do bibliajfa.com.br. Fase 2: cores trocadas para a paleta real da BíbliaTeca — #0282E2, confirmado como cor de marca tanto no app Android (colorPrimary) como no app iOS (ThemeAccentColor/ThemePrimaryColor) — e navy #1A2B4A, já usado no site antes deste redesign. Inclui variante de modo escuro. ========================================================================== */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/HankenGrotesk-Variable.woff2') format('woff2-variations'), url('../fonts/HankenGrotesk-Variable.woff2') format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/Fraunces-Variable.woff2') format('woff2-variations'), url('../fonts/Fraunces-Variable.woff2') format('woff2'); } :root { /* Tipografia — display diferenciado do bibliajfa (Spectral): Fraunces, serifa mais expressiva/editorial, com eixo ótico ajustado via font-variation-settings. */ --font-body: 'Hanken Grotesk', sans-serif; --font-display: 'Fraunces', serif; /* Cor — modo claro (paleta BíbliaTeca) */ --color-bg: #F3F6FC; /* fundo geral, azul muito claro (era creme no JFA) */ --color-surface: #ffffff; --color-ink: #1A2B4A; /* navy — texto principal / títulos */ --color-ink-strong: #16233B; /* usado no H1 da hero */ --color-muted: #5A6B7D; --color-muted-2: #6F8BA4; --color-accent: #0282E2; /* azul de marca confirmado (Android colorPrimary / iOS ThemeAccentColor) */ --color-reader-accent: #0282E2; /* mesmo azul dentro do leitor — identidade única, ao contrário do JFA */ --color-night: #0B1626; /* secção de contraste escura (era castanho no JFA) */ --color-night-card: #14233A; --color-night-border: #23374F; --color-on-dark: #ffffff; --color-on-dark-muted: #C7D6EC; --color-on-night-muted: #AEC3E0; --color-on-night-strong: #F0F5FC; --color-dark-accent: #5EB1FF; /* azul claro usado sobre fundos escuros (variante dark do próprio app) */ --color-card-border: #DCE7F7; --color-picker-border: #DCE7F7; --color-panel-bg: #E9F0FB; --color-panel-border: #D7E3F5; --color-header-bg: rgba(243, 246, 252, 0.82); /* Raios — herdados da Fase 1 (shadcn/Tailwind do JFA), pequenos, não pílulas */ --radius-sm: 6px; --radius-md: 12px; --radius-card: 22px; --radius-pill: 999px; /* Sombra */ --shadow-card: 0 2px 24px 0 rgba(20, 30, 55, 0.08); --shadow-header: 0 1px 0 0 rgba(20, 30, 55, 0.08); } /* Modo escuro — aplicado via [data-theme="dark"] no (ver custom.js) */ :root[data-theme="dark"] { --color-bg: #0B1220; --color-surface: #131C2E; --color-ink: #EAF0FB; --color-ink-strong: #FFFFFF; --color-muted: #93A6C2; --color-muted-2: #7E93B3; --color-accent: #4DA3FF; --color-reader-accent: #4DA3FF; --color-night: #060B14; --color-night-card: #131C2E; --color-night-border: #223049; --color-on-dark: #ffffff; --color-on-dark-muted: #A9BEDD; --color-on-night-muted: #A9BEDD; --color-on-night-strong: #F5F8FC; --color-dark-accent: #6DB4FF; --color-card-border: #223049; --color-picker-border: #223049; --color-panel-bg: #131C2E; --color-panel-border: #223049; --color-header-bg: rgba(11, 18, 32, 0.82); --shadow-card: 0 2px 24px 0 rgba(0, 0, 0, 0.35); --shadow-header: 0 1px 0 0 rgba(0, 0, 0, 0.35); }