/* * ============================================================ * tokens.css — bio-igreja * ============================================================ * FUNÇÃO DESTE ARQUIVO: * Define os "design tokens" do projeto como variáveis CSS * (CSS Custom Properties). Tokens são os valores fundamentais * de design — cores, tipografia, espaçamentos, bordas — que * são usados em todo o styles.css. * * POR QUE USAR VARIÁVEIS? * Em vez de repetir "#0098DA" em 30 lugares do CSS, criamos * a variável --color-primary uma vez aqui. Assim, para mudar * a cor principal do site, basta alterar esta linha — e todos * os elementos que a usam são atualizados automaticamente. * * COMO FUNCIONA O :root? * :root é o seletor do elemento com a maior * especificidade. Variáveis declaradas aqui ficam disponíveis * em qualquer elemento da página (são "globais" no CSS). * * SINTAXE DAS VARIÁVEIS: * Declaração: --nome-da-variavel: valor; * Uso: color: var(--nome-da-variavel); * ============================================================ */ :root { /* ── CORES DA MARCA ──────────────────────────────────────── * Paleta oficial da Igreja em São José (5 cores definidas). * Cada cor tem um papel semântico claro no projeto. * * #0098DA — azul céu vibrante → cor primária da interface * #17334E — navy profundo → textos e hover de botões * #5D2E26 — vinho/marrom → fundo do ícone Pão de Judá * #FEC749 — dourado → borda do avatar, destaques * #FFF8AF — amarelo muito claro → fundo alternativo sutil */ /* Cor de fundo geral — derivada do azul primário, quase branco */ --color-bg: #EDF7FC; /* Fundo de superfície — cards, painéis */ --color-surface: #FFFFFF; /* Fundo alternativo — amarelo palha muito suave da marca */ --color-surface-alt: #FFF8AF; /* Cor primária da marca: azul céu vibrante */ --color-primary: #0098DA; /* Versão mais escura do primário — usado em hover de elementos de fundo claro */ --color-primary-hover: #007BB5; /* Cor padrão de textos — navy profundo da marca */ --color-text: #17334E; /* Textos secundários — navy com 60% de opacidade */ --color-text-muted: rgba(23, 51, 78, 0.60); /* Texto sobre fundo escuro (ex: texto branco em botão navy) */ --color-text-inverse: #FFFFFF; /* Bordas sutis — azul primário com 12% de opacidade */ --color-border: rgba(0, 152, 218, 0.12); /* Bordas com mais destaque — azul primário com 22% de opacidade */ --color-border-strong: rgba(0, 152, 218, 0.22); /* Dourado da marca — borda do avatar, detalhes de destaque */ --color-gold: #FEC749; /* Amarelo claro da marca — fundo alternativo, hover suave */ --color-gold-light: #FFF8AF; /* Vinho/marrom da marca — fundo do ícone do app Pão de Judá */ --color-maroon: #5D2E26; /* ── ESCALA NAVY ────────────────────────────────────────── * Série de tons derivados do navy oficial (#17334E). * H≈209°, S≈55%. Usados em hover de botões e destaques. * * --navy-base é o #17334E original da marca. * As demais são interpolações mais claras ou escuras. */ --navy-dark: hsl(209, 55%, 14%); /* ~#101F2E */ --navy-base: #17334E; /* hsl(209, 55%, 20%) — oficial */ --navy-mid: hsl(209, 55%, 26%); /* ~#1E4265 */ --navy-light: hsl(209, 55%, 32%); /* ~#26527D */ --navy-lighter: hsl(209, 55%, 38%); /* ~#2E6295 */ /* ── TIPOGRAFIA ──────────────────────────────────────────── * Duas fontes com papéis distintos: * --font-heading → Playfair Display (serifa) — título/nome da igreja * --font-body → Rubik (sem serifa) — corpo, labels, footer */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Rubik', system-ui, -apple-system, sans-serif; /* ── BORDER RADIUS (ARREDONDAMENTO DE CANTOS) ────────────── * sm = pouco arredondado, pill = completamente arredondado. */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-pill: 999px; /* ── ESPAÇAMENTOS ────────────────────────────────────────── * Escala múltipla de 8px. Usado em padding, margin e gap. */ --space-4: 16px; --space-6: 24px; --space-8: 32px; }