/* ========================================================================== AXIOMA : tokens.css Fontes auto-hospedadas + variaveis de design dos DOIS temas (claro / dark). O tema e controlado por [data-theme] no (ver js/theme.js). ========================================================================== */ /* ---------- Fontes (variaveis, subset latin, offline) --------------------- */ @font-face { font-family: "Sora"; src: url("../assets/fonts/Sora.woff2") format("woff2"); font-weight: 300 800; /* fonte variavel: cobre toda a faixa */ font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../assets/fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Fonte da marca (usada nas palavras-chave em gradiente) */ @font-face { font-family: "Alacrity Sans"; src: url("../assets/fonts/AlacritySans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ========================================================================== 1. Tokens invariantes (nao mudam entre temas) ========================================================================== */ :root { /* Cores-base da marca (constantes; os temas apenas as reaproveitam) */ --c-red: #E6402A; --c-orange: #F26B1F; --c-navy: #0A1A3C; --c-royal: #1B4F9C; --c-sky: #4FA8E0; --c-ink: #141414; --c-white: #FFFFFF; /* Gradiente-assinatura da marca (uso pontual: filetes, hovers, acentos) */ --grad: linear-gradient(120deg, var(--c-red) 0%, var(--c-orange) 22%, var(--c-royal) 62%, var(--c-sky) 100%); --grad-soft: linear-gradient(120deg, rgba(230,64,42,.85) 0%, rgba(242,107,31,.85) 25%, rgba(27,79,156,.9) 65%, rgba(79,168,224,.9) 100%); /* Tipografia */ --font-display: "Sora", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-brand: "Alacrity Sans", var(--font-display); /* Escala tipografica fluida (mobile -> desktop) */ --fs-eyebrow: .72rem; --fs-small: .875rem; --fs-body: 1.0625rem; /* 17px */ --fs-lead: clamp(1.15rem, 1.02rem + .65vw, 1.4rem); --fs-h3: clamp(1.2rem, 1.05rem + .8vw, 1.6rem); --fs-h2: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); --fs-h1: clamp(2.5rem, 1.7rem + 4vw, 4.6rem); --fs-display: clamp(3rem, 1.8rem + 6vw, 6rem); --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.62; /* Espacamento (escala 4pt) */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Layout */ --container: 1180px; --container-narrow: 860px; --gutter: clamp(1.25rem, 5vw, 4rem); --section-y: clamp(4.5rem, 3rem + 7vw, 9rem); /* Formas */ --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --hairline: 1px; /* Movimento */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .5s; --dur-fast: .25s; --header-h: 74px; } /* ========================================================================== 2. TEMA CLARO : "papel institucional" (padrao) ========================================================================== */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #FBFAF8; /* papel quente, nao branco puro */ --bg-2: #F4F2ED; /* faixa alternada */ --surface: #FFFFFF; --surface-2: #F7F5F1; --surface-inv: #0A1A3C; /* bloco de contraste (navy) dentro do claro */ --ink: #16181D; /* corpo */ --ink-strong: #0A1A3C; /* titulos (navy) */ --ink-inv: #F4F6FA; /* texto sobre surface-inv */ --muted: #55606E; /* secundario : AA sobre papel */ --muted-inv: #9FB2CD; --line: rgba(10, 26, 60, .12); --line-strong: rgba(10, 26, 60, .22); --link: #1B4F9C; /* royal : AA sobre papel */ --link-hover: #123f80; /* Botao primario */ --btn-bg: #0A1A3C; --btn-fg: #FFFFFF; --accent: #C2472A; /* laranja escurecido p/ AA quando vira texto */ --hex-tint: rgba(10, 26, 60, .05); /* marca d'agua discreta */ --shadow-sm: 0 1px 2px rgba(10,26,60,.06), 0 2px 8px rgba(10,26,60,.05); --shadow: 0 6px 24px rgba(10,26,60,.09), 0 2px 8px rgba(10,26,60,.06); --shadow-lg: 0 24px 60px rgba(10,26,60,.14); --header-bg: rgba(251, 250, 248, .82); } /* ========================================================================== 3. TEMA DARK : "navy de autoridade" ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg: #081227; /* navy profundo (nao preto) */ --bg-2: #0A1A3C; --surface: #0E2347; --surface-2: #10264D; --surface-inv: #F4F2ED; /* bloco claro dentro do dark */ --ink: #E9EEF6; --ink-strong: #FFFFFF; --ink-inv: #0A1A3C; --muted: #9FB2CD; --muted-inv: #55606E; --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .24); --link: #7DBDEC; /* sky claro : AA sobre navy */ --link-hover: #A9D4F5; --btn-bg: #FFFFFF; --btn-fg: #0A1A3C; --accent: #F58B4C; /* laranja mais claro p/ AA sobre navy */ --hex-tint: rgba(255, 255, 255, .04); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 10px 30px rgba(0,0,0,.4); --shadow-lg: 0 30px 70px rgba(0,0,0,.5); --header-bg: rgba(8, 18, 39, .72); }