/* * Tokens do design Skylearn Imob. * Fonte única: docs/DESIGN.md, registrado no site via novamira/save-design. * Nenhum valor aqui é inventado; cada um sai do contrato do design. */ /* --- Fontes self-hospedadas. Nenhum link para Google Fonts. --- */ @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/atkinson-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/atkinson-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/atkinson-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/atkinson-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Nunito e JetBrains Mono são variáveis: um arquivo cobre toda a faixa de peso. */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/nunito-var-latin.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/nunito-var-latin-ext.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/jetbrains-var-latin.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/jetbrains-var-latin-ext.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- Tokens --- */ :root { /* Cores. Sky é o único accent e carrega toda ação do site. */ --imob-bg: #FFFFFF; --imob-surface: #F8FAFC; --imob-surface-elevated: #FFFFFF; --imob-surface-sunken: #F1F5F9; --imob-ink: #0F172A; --imob-ink-muted: #475569; --imob-ink-subtle: #94A3B8; --imob-ink-faint: #CBD5E1; /* * ink-subtle (2.56:1) e ink-faint (1.42:1) não passam como texto. Ficam * reservados a borda e elemento decorativo; todo metadado legível e todo * placeholder usam este tom, que dá 4.76:1 no branco e 4.55:1 na surface. */ --imob-ink-meta: #64748B; --imob-accent: #3B82F6; --imob-accent-bright: #60A5FA; --imob-accent-deep: #1D4ED8; --imob-accent-soft: #DBEAFE; /* * Tons de ação: texto branco sobre o sky puro dá 3.68:1, abaixo do mínimo * de 4.5:1 que o design exige de todo controle. Estes dois passam, e * mantêm a leitura de "azul da marca". * branco em #2563EB = 5.17:1 branco em #1D4ED8 = 6.70:1 */ --imob-accent-acao: #2563EB; --imob-accent-acao-hover: #1D4ED8; --imob-sun: #FBBF24; --imob-sun-bright: #FCD34D; --imob-sun-deep: #D97706; --imob-leaf: #22C55E; --imob-leaf-soft: #DCFCE7; --imob-leaf-deep: #16A34A; /* Mesma razão no verde: branco em #16A34A dá 3.30:1. Estes dão 5.02 e 6.64. */ --imob-leaf-acao: #15803D; --imob-leaf-acao-hover: #0F6B2E; --imob-coral: #F87171; --imob-coral-soft: #FEE2E2; --imob-outline: #E2E8F0; --imob-outline-strong: #94A3B8; /* Tipografia */ --imob-font-display: 'Hubot Sans', 'Nunito', sans-serif; --imob-font-body: 'Atkinson Hyperlegible', 'Nunito', system-ui, sans-serif; --imob-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Escala de tipo. Display fecha o entrelinhamento, corpo mantém conforto. */ --imob-hero: 3.5rem; --imob-hero-lh: 1.07; --imob-h1: 2.5rem; --imob-h1-lh: 1.1; --imob-h2: 2rem; --imob-h2-lh: 1.125; --imob-h3: 1.5rem; --imob-h3-lh: 1.25; --imob-h4: 1.1875rem; --imob-h4-lh: 1.37; --imob-body-lg: 1.25rem; --imob-body: 1.125rem; --imob-body-lh: 1.55; --imob-small: 1rem; --imob-caption: 0.875rem; --imob-preco: 2.5rem; --imob-preco-lg: 3.5rem; /* Espaçamento, base 4px */ --imob-space-xs: 4px; --imob-space-sm: 8px; --imob-space-12: 12px; --imob-space-md: 16px; --imob-space-24: 24px; --imob-space-lg: 32px; --imob-space-48: 48px; --imob-space-xl: 64px; --imob-space-96: 96px; /* Raios, uma escala só, sob regra declarada */ --imob-radius-sm: 8px; --imob-radius-md: 16px; --imob-radius-lg: 20px; --imob-radius-xl: 28px; --imob-radius-pill: 999px; /* Elevação. Toda sombra é tingida com o navy do ink, nunca preto puro. */ --imob-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06); --imob-shadow-card-hover: 0 12px 32px rgba(15, 23, 42, 0.1); --imob-shadow-destaque: 0 12px 32px rgba(59, 130, 246, 0.15); --imob-shadow-panel: 0 24px 48px rgba(15, 23, 42, 0.12); /* Layout */ --imob-container: 1280px; --imob-gutter: 24px; --imob-medida: 68ch; /* Movimento. Dial motion 0.3: transição de estado, sem animação de scroll. */ --imob-transicao: 240ms cubic-bezier(0.34, 1.56, 0.64, 1); --imob-transicao-rapida: 120ms ease-out; } @media (max-width: 640px) { :root { --imob-hero: 2.25rem; --imob-h1: 1.875rem; --imob-h2: 1.5rem; --imob-preco: 1.875rem; --imob-preco-lg: 2.25rem; --imob-gutter: 20px; } } @media (prefers-reduced-motion: reduce) { :root { --imob-transicao: 1ms linear; --imob-transicao-rapida: 1ms linear; } }