/* ═══════════════════════════════════════════════════════════════ INCONNECT · DESIGN TOKENS · v2027.1 · rev. 2026-09-25 (variantes claras, text-mute, orange-ink, focus-visible) Cole este arquivo em qualquer projeto, site ou sistema. Tema: adicione data-theme="light" no para o tema claro. ═══════════════════════════════════════════════════════════════ */ /* ── Fontes ── url() relativa a ESTE arquivo: carregado de https://brand.inconnectss.com.br/inconnect-tokens.css resolve para https://brand.inconnectss.com.br/fonts/… — vale igual pra quem importa de fora e pro próprio site. Gutón oficial, servida de https://brand.inconnectss.com.br/fonts/ (CORS aberto). Ajuste os caminhos locais de fallback se necessário. Geist Mono: https://brand.inconnectss.com.br/fonts/geist-mono/geist-mono.css */ @font-face { font-family: 'Inconnect-Guton'; src: url('fonts/Guton-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inconnect-Guton'; src: url('fonts/Guton-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inconnect-Guton'; src: url('fonts/Guton-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inconnect-Guton'; src: url('fonts/Guton-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inconnect-Guton'; src: url('fonts/Guton-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Inconnect-Guton'; src: url('fonts/Guton-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } :root { /* ── Marca (não mudam com o tema) ── */ --ic-indigo: #711AE9; /* Electric Indigo — marca principal, CTAs */ --ic-indigo-deep: #5100C1; /* Chrysler Blue — hover, gradientes */ --ic-orange: #FF691E; /* Orange Crayola — acento quente, máx 10% */ --ic-black: #0A0A0B; /* Eerie Black */ --ic-seasalt: #F7F9FB; /* Seasalt */ /* Escala Indigo */ --ic-indigo-900: #1a0738; --ic-indigo-800: #3a0f7e; --ic-indigo-700: #5514b8; --ic-indigo-500: #711AE9; --ic-indigo-400: #8f47ed; --ic-indigo-300: #b794f4; --ic-indigo-200: #dccff9; --ic-indigo-100: #ece2fb; /* Escala Orange */ --ic-orange-900: #3d1808; --ic-orange-800: #7a3010; --ic-orange-700: #b84818; --ic-orange-500: #FF691E; --ic-orange-400: #ff8645; --ic-orange-300: #ffa775; --ic-orange-200: #ffcba8; --ic-orange-100: #ffe4d0; /* Semânticas */ --ic-success: #4ADE80; --ic-warning: #FACC15; --ic-error: #EF4444; --ic-info: #60A5FA; /* Tipografia — Gutón faz tudo; Geist Mono só pra dados/código */ --ic-font: 'Inconnect-Guton', 'Fraunces', Georgia, serif; --ic-mono: 'Geist Mono', 'JetBrains Mono', monospace; /* Escala tipográfica */ --ic-text-display-xl: 700 96px/0.92 var(--ic-font); --ic-text-display: 600 64px/0.95 var(--ic-font); --ic-text-h1: 600 48px/1.05 var(--ic-font); --ic-text-h2: 500 36px/1.1 var(--ic-font); --ic-text-h3: 500 28px/1.2 var(--ic-font); --ic-text-subtitle: 500 22px/1.35 var(--ic-font); --ic-text-body: 400 16px/1.6 var(--ic-font); --ic-text-small: 400 14px/1.5 var(--ic-font); --ic-text-label: 500 10px/1 var(--ic-mono); /* + letter-spacing .22em, uppercase */ /* Espaçamento — base 4 */ --ic-sp-1: 4px; --ic-sp-2: 8px; --ic-sp-3: 12px; --ic-sp-4: 16px; --ic-sp-5: 20px; --ic-sp-6: 24px; --ic-sp-8: 32px; --ic-sp-10: 40px; --ic-sp-12: 48px; --ic-sp-16: 64px; /* Raio */ --ic-radius-sm: 6px; --ic-radius: 8px; --ic-radius-lg: 12px; --ic-radius-pill: 999px; /* Motion */ --ic-ease-enter: cubic-bezier(0.22, 1, 0.36, 1); --ic-ease-exit: cubic-bezier(0.64, 0, 0.78, 0); --ic-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ic-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ic-dur-instant: 80ms; --ic-dur-fast: 160ms; --ic-dur-normal: 240ms; --ic-dur-slow: 400ms; --ic-dur-cinematic: 700ms; --ic-dur-epic: 1200ms; /* Gradientes aprovados */ --ic-grad-sunset: linear-gradient(135deg, #5100C1 0%, #711AE9 40%, #FF691E 100%); --ic-grad-night: linear-gradient(180deg, #0a0a0b 0%, #1a0738 100%); --ic-grad-indigo-flow: linear-gradient(135deg, #5100C1 0%, #b794f4 100%); --ic-grad-aurora: radial-gradient(circle at 30% 30%, rgba(113,26,233,0.6) 0%, transparent 60%); /* ── Tema DARK (padrão) · light via data-theme, os dois de produção ── */ --ic-bg: #0A0A0B; /* fundo página */ --ic-bg-raised: #070708; /* seções alternadas */ --ic-surface: rgba(255,255,255,0.035); /* cards, painéis */ --ic-surface-solid: #141416; /* dropdowns, modais */ --ic-border: rgba(255,255,255,0.09); --ic-border-strong: rgba(255,255,255,0.2); --ic-text: #FFFFFF; --ic-text-soft: rgba(255,255,255,0.65); --ic-text-mute: #8a8aa0; /* 5,86:1 sobre #0A0A0B (rgba .42 dava 4,18 — só texto grande) */ --ic-accent-soft: rgba(113,26,233,0.14); /* fundos de destaque indigo */ --ic-accent-border: rgba(113,26,233,0.35); --ic-accent-ink: #b794f4; /* indigo legível sobre dark */ --ic-orange-ink: #ff8645; /* laranja como TEXTO usa -ink; #FF691E só como cor de superfície/acento */ --ic-chart-meta: #8f47ed; /* barra/série/badge do canal Meta (Google = --ic-success); #711AE9 mede 2,18 sobre trilho escuro */ --ic-overlay: rgba(5,5,6,0.72); --ic-shadow: 0 16px 48px rgba(0,0,0,0.5); } [data-theme="light"] { --ic-bg: #F7F9FB; --ic-bg-raised: #FFFFFF; --ic-surface: #FFFFFF; --ic-surface-solid: #FFFFFF; --ic-border: rgba(10,10,11,0.1); --ic-border-strong: rgba(10,10,11,0.24); --ic-text: #0A0A0B; --ic-text-soft: rgba(10,10,11,0.68); --ic-text-mute: #6b6b7e; /* 4,94:1 sobre #F7F9FB (rgba .45 dava 3,15) */ --ic-accent-soft: rgba(113,26,233,0.07); --ic-accent-border: rgba(113,26,233,0.28); --ic-accent-ink: #5514b8; --ic-orange-ink: #b84818; /* 5,28:1 sobre #F7F9FB */ --ic-chart-meta: #711AE9; /* canal Meta no claro — 6,57:1 sobre #F7F9FB */ --ic-overlay: rgba(10,10,11,0.4); --ic-shadow: 0 16px 48px rgba(10,10,11,0.12); /* Semânticas claras — as de :root (#4ADE80 etc.) medem 1,5–3,8:1 sobre #F7F9FB; estas passam AA ≥4,5:1 (contraste medido). No escuro as de :root já são AA. */ --ic-success: #047857; /* 5,20 */ --ic-warning: #b45309; /* 4,76 */ --ic-error: #b91c1c; /* 6,13 */ --ic-info: #2563eb; /* 4,90 */ } /* ── Base ── */ body.ic-base { background: var(--ic-bg); color: var(--ic-text); font: var(--ic-text-body); -webkit-font-smoothing: antialiased; margin: 0; } .ic-base a { color: var(--ic-accent-ink); text-decoration: none; transition: color var(--ic-dur-fast) var(--ic-ease-enter); } .ic-base a:hover { color: var(--ic-accent-ink); text-decoration: underline; } /* indigo-400 mede 4,04 no escuro — hover muda o sublinhado, não a cor */ /* Foco visível — WCAG 2.4.7 / 1.4.11. Nunca outline:none sem repor um :focus-visible. */ :focus-visible { outline: 2px solid var(--ic-accent-ink); outline-offset: 2px; } /* Acessibilidade — regra obrigatória da marca */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }