/* =========================================================================== IMP-020 — TOKENS COMPARTILHADOS Caderno de bordo do pescador · teal = água/calma · laranja = a fisgada --------------------------------------------------------------------------- Incluído globalmente via views/site/shared/layout.php. Mantém aliases --hm-* e --af-* existentes apontando para os tokens novos, para não quebrar CSS/JS legado durante a migração. =========================================================================== */ :root { /* ---- MARCA / COR ------------------------------------------------------ */ /* Água (teal) — superfícies calmas, navegação, estados de repouso */ --fb-teal: #72cbd1; /* água rasa (marca primária) */ --fb-teal-deep: #4ab0b7; /* água funda (hover/pressionado teal) */ --fb-teal-ink: #1a3a3d; /* fundo do mar (texto forte / títulos) */ /* Fisgada (laranja) — ação, like ativo, troféu, destaque central */ --fb-orange: #f87c2c; /* a fisgada (CTA primário) */ --fb-orange-deep: #ff8c00; /* sol no anzol (hover/pressionado CTA) */ --fb-orange-soft: #fff1e6; /* lavagem laranja (fundo de chip ativo) */ /* Tinta / texto */ --fb-ink: #16282a; /* texto principal sobre claro */ --fb-text: #4b5b5c; /* corpo */ --fb-muted: #7b8c8d; /* legendas, metadados */ --fb-faint: #a9b8b9; /* placeholder, ícones inativos */ /* Superfícies */ --fb-surface: #ffffff; /* card / topbar */ --fb-wash: #f1f8f8; /* fundo de página (teal lavadíssimo) */ --fb-wash-2: #e7f3f3; /* fundo alternado / skeleton */ --fb-line: #dfeaea; /* divisórias, bordas 1px */ --fb-line-strong: #c7d8d8; /* Palco de mídia — fundo escuro para vídeo/foto respirarem inteiros */ --fb-stage: #0d1a1b; /* fundo do palco (quase-preto esverdeado)*/ --fb-stage-2: #08110f; /* vinheta inferior do palco */ --fb-on-stage: #f4faf9; /* texto/ícone sobre palco escuro */ /* Estados semânticos */ --fb-like: #f5455c; /* coração curtido (vermelho-coral) */ --fb-trophy: #e8a33d; /* dourado de troféu (medalha) */ --fb-success: #2faf7e; --fb-danger: #e5484d; /* ---- TIPOGRAFIA ------------------------------------------------------- */ /* Display: Fraunces — serif com caráter editorial, "diário"/troféu. Body/UI: Outfit — geométrica humanista, legível, NÃO Inter/Roboto. Fontes carregadas via Google Fonts no do layout.php. */ --fb-font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --fb-font-body: "Outfit", "Segoe UI", system-ui, sans-serif; --fb-font-num: "Fraunces", Georgia, serif; /* stats de troféu */ /* Escala tipográfica (mobile-first, base 16px) */ --fb-fs-display: 2rem; /* 32px — título de captura (espécie) */ --fb-fs-h1: 1.5rem; /* 24px — título de seção */ --fb-fs-h2: 1.25rem; /* 20px */ --fb-fs-lg: 1.0625rem;/* 17px — nome de usuário */ --fb-fs-body: 0.9375rem;/* 15px — corpo / legenda */ --fb-fs-sm: 0.8125rem;/* 13px — metadados */ --fb-fs-xs: 0.6875rem;/* 11px — overline, label de navbar */ --fb-lh-tight: 1.08; /* títulos display */ --fb-lh-snug: 1.25; --fb-lh-body: 1.5; --fb-fw-light: 300; --fb-fw-reg: 400; --fb-fw-med: 500; --fb-fw-semi: 600; --fb-fw-bold: 700; --fb-fw-black: 900; /* Fraunces opsz alto p/ stat de tamanho */ /* ---- ESPAÇO ----------------------------------------------------------- */ --fb-space-0: 2px; --fb-space-1: 6px; --fb-space-2: 10px; --fb-space-3: 16px; --fb-space-4: 24px; --fb-space-5: 32px; --fb-space-6: 44px; --fb-space-7: 64px; /* ---- RAIO ------------------------------------------------------------- */ --fb-radius-xs: 8px; --fb-radius-sm: 12px; --fb-radius: 16px; /* card padrão */ --fb-radius-lg: 22px; /* card de feed imersivo */ --fb-radius-pill:999px; /* ---- SOMBRA / ELEVAÇÃO ----------------------------------------------- */ /* Sombras com matiz teal (não cinza neutro) — coesão com a água */ --fb-shadow-sm: 0 2px 10px rgba(16, 40, 42, 0.07); --fb-shadow: 0 8px 24px rgba(16, 40, 42, 0.12); --fb-shadow-lg: 0 16px 40px rgba(16, 40, 42, 0.18); /* Botão da fisgada — sombra colorida laranja, "energia" */ --fb-shadow-orange: 0 6px 18px rgba(248, 124, 44, 0.38); --fb-shadow-orange-lg: 0 10px 28px rgba(248, 124, 44, 0.45); /* ---- Z-INDEX (escala única, sem mágica de números soltos) ------------ */ --fb-z-base: 0; --fb-z-stage-ui: 10; /* botões play/som/badge sobre o palco */ --fb-z-sticky: 100; /* barra publicar sticky */ --fb-z-nav: 1000; /* bottom-nav fixa */ --fb-z-toast: 1100; /* toast acima da nav */ --fb-z-modal: 1200; /* ---- MOVIMENTO -------------------------------------------------------- */ --fb-ease: cubic-bezier(0.22, 1, 0.36, 1); /* "soft landing" */ --fb-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --fb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* overshoot (like) */ --fb-dur-1: 120ms; /* tap feedback */ --fb-dur-2: 200ms; /* hover / cor */ --fb-dur-3: 320ms; /* transição de elemento */ --fb-dur-4: 480ms; /* entrada de página / stagger */ /* ---- LAYOUT ----------------------------------------------------------- */ --fb-nav-h: 60px; /* altura útil da bottom-nav */ --fb-safe-bottom: env(safe-area-inset-bottom, 0px); --fb-content-max: 540px; /* largura máxima do feed em telas largas */ } /* -------------------------------------------------------------------------- ALIASES DE COMPATIBILIDADE — mantêm CSS/JS legado funcionando. Remover gradualmente conforme as views migram. -------------------------------------------------------------------------- */ :root { --hm-teal: var(--fb-teal); --hm-teal-deep: var(--fb-teal-deep); --hm-teal-ink: var(--fb-teal-ink); --hm-orange: var(--fb-orange); --hm-orange-deep: var(--fb-orange-deep); --hm-ink: var(--fb-ink); --hm-text: var(--fb-text); --hm-muted: var(--fb-muted); --hm-surface: var(--fb-surface); --hm-wash: var(--fb-wash); --hm-line: var(--fb-line); --hm-space-1: var(--fb-space-1); --hm-space-2: var(--fb-space-2); --hm-space-3: var(--fb-space-3); --hm-space-4: var(--fb-space-4); --hm-space-5: var(--fb-space-5); --hm-space-6: var(--fb-space-6); --hm-radius: var(--fb-radius); --hm-radius-lg: var(--fb-radius-lg); --hm-shadow-sm: var(--fb-shadow-sm); --hm-shadow: var(--fb-shadow); --af-teal: var(--fb-teal); --af-orange: var(--fb-orange); --af-surface: var(--fb-surface); --af-radius: var(--fb-radius); }