/* TOKENS — design system oficial (brand book Favo) */ /* ============================================================================ GRUPO FAVO - KERNEL v2 (Design System oficial - brand book) Tema: fundo --gradient-ink (navy escuro) + símbolo favo como marca d'água, texto branco, destaque em Mel (amarelo), CTAs em Mel/Âmbar. Movimento calmo, sem bounce. Tudo deriva destes tokens oficiais. Mobile-first. ========================================================================== */ /* Fontes: Roboto (substituto sancionado da Filson Pro) + Roboto Mono. Carregadas via no do index.html — um @import aqui serializaria o download atrás do CSS. */ :root { /* ---- Mel · Yellow (brand = 400) ---- */ --favo-yellow-50:#fefce8; --favo-yellow-100:#fdf7c2; --favo-yellow-200:#fbef91; --favo-yellow-300:#f7e766; --favo-yellow-400:#f3df47; --favo-yellow-500:#e7cd2b; --favo-yellow-600:#c7ab1d; --favo-yellow-700:#9c8418; --favo-yellow-800:#7c681b; --favo-yellow-900:#69571c; /* ---- Âmbar · Amber (brand = 500) ---- */ --favo-amber-50:#fdf6e8; --favo-amber-100:#fae7c1; --favo-amber-200:#f5d488; --favo-amber-300:#f0bf52; --favo-amber-400:#eeb540; --favo-amber-500:#ebae34; --favo-amber-600:#d18f1d; --favo-amber-700:#a76e18; --favo-amber-800:#86571a; --favo-amber-900:#714819; /* ---- Tinta · Ink / cool-navy (brand = 900) ---- */ --favo-ink-50:#f4f5f9; --favo-ink-100:#e7e9f1; --favo-ink-200:#cdd1e0; --favo-ink-300:#a8aec6; --favo-ink-400:#7e86a6; --favo-ink-500:#5d6589; --favo-ink-600:#474e6e; --favo-ink-700:#343a56; --favo-ink-800:#232742; --favo-ink-900:#17192f; --favo-ink-950:#0e0f1f; /* ---- Neutros / paper ---- */ --favo-white:#ffffff; --favo-paper:#fafbfd; --favo-mist:#f1f3f8; --favo-black:#0a0b15; /* ---- Céu (sub-marca Solar Care) + Menta ---- */ --favo-sky-100:#d8eef8; --favo-sky-200:#c8e6ed; --favo-sky-300:#99d6ea; --favo-sky-500:#0085ca; --favo-sky-700:#0a5f93; --favo-mint-400:#76cca3; /* ---- Semânticas ---- */ --favo-success-100:#d9f3e4; --favo-success-500:#1f9d57; --favo-success-700:#157243; --success-soft:#5fd197; --favo-warning-500:#ebae34; --favo-danger-100:#fbdedd; --favo-danger-500:#e5484d; --favo-danger-700:#b22c30; --favo-info-500:#0085ca; /* ===================================================================== ALIASES SEMÂNTICOS - modo TECH ESCURO (app "Caixa Preta"). Sempre referencie estes nos componentes, não as escalas cruas. =================================================================== */ --accent: var(--favo-yellow-400); /* Mel */ --accent-hover: var(--favo-yellow-300); --accent-deep: var(--favo-amber-500); /* Âmbar */ --accent-deep-hover: var(--favo-amber-400); --accent-contrast: var(--favo-ink-900); /* navy lê sobre amarelo/âmbar */ /* superfícies — escala real: mais elevado = mais claro. O fundo escurece no topo (ver body em 02-base.css) exatamente para o card poder ser mais claro que ele — antes --surface-card (#1b1e38) era mais escuro que o topo do gradiente (#232742) e o card "afundava" em vez de flutuar. */ --surface-0: #12142a; /* base da página */ --surface-1: #1b1e38; /* área rebaixada sólida */ --surface-2: #232742; /* card */ --surface-3: #2b3050; /* elemento sobre o card */ --surface-bg: var(--surface-0); --surface-card: var(--surface-2); --surface-raised: var(--surface-3); --surface-sunken: rgba(255,255,255,0.04); /* campo/área rebaixada */ /* fio de luz na borda superior de qualquer superfície elevada */ --hairline: inset 0 1px 0 rgba(255,255,255,.07); /* texto sobre escuro — cinco níveis realmente distintos (antes --text-muted e --text-subtle compartilhavam o mesmo valor e colapsavam a hierarquia) */ --text-strong: #ffffff; --text-body: #cdd1e0; --text-muted: #a8aec6; --text-subtle: #8b93b0; --text-faint: #6b7391; /* só decorativo: separadores, marcas d'água */ --text-on-accent: var(--favo-ink-900); /* bordas/linhas sobre escuro */ --border-subtle: rgba(255,255,255,0.08); --border-default: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.22); /* foco: dois tons (halo navy + traço Mel) — o anel âmbar simples de antes dava 2,93:1 de contraste, abaixo do mínimo WCAG, e ficava quase invisível sobre botão Mel. */ --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--favo-yellow-300); /* sombras tingidas de navy — profundidade, não halo sujo de preto puro */ --shadow-sm: 0 1px 2px rgba(10,11,21,.44), 0 1px 3px rgba(23,25,47,.32); --shadow-md: 0 6px 18px rgba(10,11,21,.46), 0 2px 6px rgba(23,25,47,.34); --shadow-lg: 0 16px 40px rgba(10,11,21,.55), 0 4px 12px rgba(23,25,47,.38); /* direcional e curta: sombra projetada, não glow radial de 24px/32% — glow pulsante/estático é bandido pelo brand book ("nada de cara de IA") */ --shadow-accent: 0 6px 14px -6px rgba(235,174,52,.55); /* gradientes oficiais (suaves) */ --gradient-mel: linear-gradient(120deg, var(--favo-yellow-400) 0%, var(--favo-amber-500) 100%); --gradient-ink: linear-gradient(160deg, var(--favo-ink-800) 0%, var(--favo-ink-950) 100%); /* tipografia */ --font-display: "Roboto",system-ui,-apple-system,"Segoe UI",sans-serif; --font-sans: "Roboto",system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono: "Roboto Mono",ui-monospace,"SF Mono",Menlo,monospace; --weight-regular:400; --weight-medium:500; --weight-bold:700; --weight-heavy:900; --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:3rem; --text-4xl:3.75rem; --text-5xl:4.75rem; --leading-tight:1.05; --leading-snug:1.18; --leading-normal:1.5; --leading-relaxed:1.65; --tracking-tighter:-0.022em; --tracking-tight:-0.012em; --tracking-wide:0.04em; --tracking-overline:0.16em; /* espaço (grid 4px) */ --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; /* raios */ --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px; --radius-card:var(--radius-lg); --radius-control:var(--radius-md); /* ===== MOVIMENTO ====================================================== Calmo, sem bounce. Entrada desacelera (ease-enter), saída acelera (ease-exit). Saída ≈70% da duração da entrada. Deslocamento máximo 16px. Cauda total ≤ 700ms em qualquer tela. */ --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15); --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: var(--ease-enter); /* alias legado do kernel v2 */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-normal: 220ms; --dur-exit: 240ms; --dur-enter: 320ms; --dur-slow: 440ms; --stagger: 45ms; --shift-sm: 4px; --shift-md: 10px; --shift-lg: 16px; /* layout */ --app-width:480px; --tap:44px; } /* ========================================================================= TOKENS NOVOS — valores base (mobile-first, 480px) Os outros especialistas usam estes nomes; o Foundation define os valores. ========================================================================= */ :root { --maxw-shell: 480px; /* = --app-width (mantém o mesmo tamanho no base) */ --maxw-home: auto; --maxw-form: auto; --maxw-cinema: auto; --maxw-panel: auto; --pad-inline: 20px; } /* sm — 600px: celular grande / tablet pequeno em pé */ @media (min-width: 600px) { :root { --maxw-shell: 540px; --pad-inline: 24px; } } /* md — 900px: tablet / notebook pequeno */ @media (min-width: 900px) { :root { --maxw-shell: 760px; --maxw-home: 640px; --maxw-form: 600px; --maxw-cinema: 700px; --maxw-panel: 740px; --pad-inline: 32px; } } /* lg — 1280px: desktop (alvo principal) */ @media (min-width: 1280px) { :root { --maxw-shell: 1160px; --maxw-home: 820px; --maxw-form: 640px; --maxw-cinema: 900px; --maxw-panel: 1100px; --pad-inline: 40px; } } /* xl — 1680px: TELÃO dedicado (1920px fullscreen cai aqui) */ /* xxl — 2560px: telão 4K */ /* Recuperado de _responsive/00-foundation.css — tokens de telão (xl/xxl) */ @media (min-width: 1680px) { :root { --maxw-shell: 1520px; --maxw-home: 1000px; --maxw-form: 760px; --maxw-cinema: 1200px; --maxw-panel: 1460px; --pad-inline: 56px; } } @media (min-width: 2560px) { :root { --maxw-shell: 1880px; --maxw-home: 1180px; --maxw-form: 860px; --maxw-cinema: 1440px; --maxw-panel: 1780px; --pad-inline: 72px; } }