/** * ============================================================ * SCRIPTCASE DESIGN SYSTEM — TOKENS * ============================================================ * Version: 2.0.0 * Updated: Abril / 2026 * License: Uso interno — Scriptcase Design & Brand * * Este arquivo é a FONTE DA VERDADE para estilos do produto * Scriptcase. Toda cor, espaçamento, raio, sombra, tipografia * e motion usados em interface devem referenciar um token * deste arquivo — nunca valores literais. * * Uso: * * * .meu-botao { * background: var(--sc-cobalt); * padding: var(--sc-s-4) var(--sc-s-5); * border-radius: var(--sc-r-md); * box-shadow: var(--sc-shadow-md); * } * * Convenção de nomenclatura: * --sc-{categoria}-{subcategoria}-{variante} * Prefixo --sc- evita colisões com outras bibliotecas. * * ============================================================ */ :root { /* ========================================================== 1. CORES · PRIMÁRIAS DE MARCA ========================================================== */ --sc-cobalt: #1C5BFE; /* Brand principal — CTAs, links, destaque */ --sc-cobalt-hover: #1547CC; /* Estado hover de elementos cobalt */ --sc-cobalt-active: #103999; /* Estado pressed/active */ --sc-sky: #52C4FF; /* Acento, info, ilustrações */ --sc-deep: #0A083A; /* Superfície escura, texto em fundo claro */ --sc-deep-700: #14123F; /* Variação levemente mais clara de deep */ --sc-deep-600: #1F1D4D; /* Variação para hover em fundos escuros */ /* ========================================================== 2. CORES · SEMÂNTICAS Uso estrito para comunicar estado. Nunca decorativo. ========================================================== */ --sc-success: #16A34A; /* Confirmações, sucesso */ --sc-warning: #FFCC4D; /* Alertas não-críticos, atenção */ --sc-danger: #E95252; /* Erros, ações destrutivas */ --sc-info: #52C4FF; /* Informação neutra (mesmo HEX do sky) */ /* ========================================================== 3. CORES · ESCALA DE CINZAS (10 TONS) ========================================================== */ --sc-gray-0: #FFFFFF; /* Branco puro */ --sc-gray-10: #F7F8FA; /* Superfície de app */ --sc-gray-20: #EDEFF3; /* Superfície rebaixada */ --sc-gray-30: #DFE2E8; /* Bordas sutis */ --sc-gray-40: #C4C9D1; /* Bordas fortes, divisores */ --sc-gray-50: #9BA1AD; /* Placeholder, ícones desabilitados */ --sc-gray-60: #6E7482; /* Texto auxiliar */ --sc-gray-70: #4A4F5C; /* Texto muted */ --sc-gray-80: #2E323C; /* Texto forte em dark */ --sc-gray-90: #1A1C23; /* Superfície escura */ --sc-gray-100: #0A0B10; /* Preto quase-puro */ /* ========================================================== 4. SURFACE TOKENS (TEMA CLARO — DEFAULT) Aliases semânticos. Ex: --sc-bg pode trocar entre claro e escuro, enquanto --sc-cobalt sempre é o cobalt. ========================================================== */ --sc-bg: var(--sc-gray-10); /* Fundo da página */ --sc-bg-elevated: #FFFFFF; /* Cards, modais, dropdowns */ --sc-bg-sunken: var(--sc-gray-20); /* Superfícies rebaixadas */ --sc-ink: var(--sc-deep); /* Texto primário */ --sc-ink-muted: var(--sc-gray-60); /* Texto secundário */ --sc-ink-subtle: var(--sc-gray-50); /* Texto terciário, dicas */ --sc-border: var(--sc-gray-30); /* Bordas padrão */ --sc-border-strong:var(--sc-gray-40); /* Bordas de inputs */ --sc-accent: var(--sc-cobalt); /* Acento interativo */ /* ========================================================== 5. ESPAÇAMENTO (GRID 8PX, BASE 4PX) Use para padding, margin, gap. Nunca pixels avulsos. ========================================================== */ --sc-s-1: 4px; --sc-s-2: 8px; --sc-s-3: 12px; --sc-s-4: 16px; --sc-s-5: 24px; --sc-s-6: 32px; --sc-s-7: 40px; --sc-s-8: 48px; --sc-s-9: 64px; --sc-s-10: 80px; --sc-s-11: 120px; --sc-s-12: 160px; /* ========================================================== 6. RAIO DE BORDA ========================================================== */ --sc-r-sm: 4px; /* Elementos pequenos — badges, tags */ --sc-r-md: 8px; /* Botões, inputs, cards pequenos */ --sc-r-lg: 12px; /* Cards, modais */ --sc-r-xl: 16px; /* Containers destacados */ --sc-r-full: 9999px; /* Pílulas, avatars circulares, switches */ /* ========================================================== 7. ELEVAÇÃO (SOMBRAS) Sombras direcionais (luz vem de cima). Baseadas em deep blue com opacidade, não cinza puro — mantém coerência com a marca. ========================================================== */ --sc-shadow-sm: 0 1px 2px rgba(10, 8, 58, 0.06); --sc-shadow-md: 0 4px 12px rgba(10, 8, 58, 0.08); --sc-shadow-lg: 0 16px 40px rgba(10, 8, 58, 0.12); --sc-shadow-focus: 0 0 0 3px rgba(28, 91, 254, 0.25); /* ========================================================== 8. TIPOGRAFIA · FAMÍLIAS ========================================================== */ --sc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sc-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sc-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* ========================================================== 9. TIPOGRAFIA · PESOS ========================================================== */ --sc-fw-light: 300; --sc-fw-regular: 400; --sc-fw-medium: 500; --sc-fw-semibold: 600; --sc-fw-bold: 700; --sc-fw-extrabold: 800; /* ========================================================== 10. TIPOGRAFIA · ESCALA Cada nível tem size, line-height e letter-spacing. Use de forma combinada: font-size: var(--sc-t-h1-size); line-height: var(--sc-t-h1-lh); letter-spacing: var(--sc-t-h1-ls); ========================================================== */ /* Display XL — hero sections, landing */ --sc-t-display-xl-size: 80px; --sc-t-display-xl-lh: 0.95; --sc-t-display-xl-ls: -0.04em; --sc-t-display-xl-fw: var(--sc-fw-extrabold); /* Display L */ --sc-t-display-l-size: 64px; --sc-t-display-l-lh: 1.0; --sc-t-display-l-ls: -0.03em; --sc-t-display-l-fw: var(--sc-fw-bold); /* H1 */ --sc-t-h1-size: 48px; --sc-t-h1-lh: 1.1; --sc-t-h1-ls: -0.02em; --sc-t-h1-fw: var(--sc-fw-bold); /* H2 */ --sc-t-h2-size: 36px; --sc-t-h2-lh: 1.2; --sc-t-h2-ls: -0.02em; --sc-t-h2-fw: var(--sc-fw-bold); /* H3 */ --sc-t-h3-size: 24px; --sc-t-h3-lh: 1.3; --sc-t-h3-ls: -0.01em; --sc-t-h3-fw: var(--sc-fw-semibold); /* H4 */ --sc-t-h4-size: 20px; --sc-t-h4-lh: 1.4; --sc-t-h4-ls: -0.005em; --sc-t-h4-fw: var(--sc-fw-semibold); /* Body Large — parágrafos de destaque */ --sc-t-body-l-size: 18px; --sc-t-body-l-lh: 1.6; --sc-t-body-l-ls: 0; --sc-t-body-l-fw: var(--sc-fw-regular); /* Body — padrão */ --sc-t-body-size: 16px; --sc-t-body-lh: 1.5; --sc-t-body-ls: 0; --sc-t-body-fw: var(--sc-fw-regular); /* Body Small — textos auxiliares */ --sc-t-body-s-size: 14px; --sc-t-body-s-lh: 1.5; --sc-t-body-s-ls: 0; --sc-t-body-s-fw: var(--sc-fw-regular); /* Caption — labels, captions, metadados */ --sc-t-caption-size: 12px; --sc-t-caption-lh: 1.4; --sc-t-caption-ls: 0.01em; --sc-t-caption-fw: var(--sc-fw-medium); /* ========================================================== 11. MOTION Três durações, duas curvas. Respeite prefers-reduced-motion. ========================================================== */ --sc-dur-fast: 120ms; /* Feedback imediato (hover, click) */ --sc-dur-med: 220ms; /* Transições de estado */ --sc-dur-slow: 400ms; /* Entradas, reveals */ --sc-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* Decelerativa */ --sc-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Simétrica */ /* ========================================================== 12. LAYOUT ========================================================== */ --sc-container-max: 1280px; --sc-container-pad: var(--sc-s-4); --sc-container-pad-md: var(--sc-s-5); --sc-container-pad-lg: var(--sc-s-7); --sc-grid-cols: 12; --sc-grid-gutter: var(--sc-s-4); /* ========================================================== 13. Z-INDEX Hierarquia definida. Nunca use z-index avulso. ========================================================== */ --sc-z-base: 0; --sc-z-dropdown: 100; --sc-z-sticky: 200; --sc-z-modal: 500; --sc-z-toast: 700; --sc-z-tooltip: 900; } /* ============================================================ TEMA ESCURO Aplicado via atributo data-theme no elemento raiz: ============================================================ */ [data-theme="dark"] { --sc-bg: var(--sc-gray-100); --sc-bg-elevated: var(--sc-gray-90); --sc-bg-sunken: #05060A; --sc-ink: var(--sc-gray-10); --sc-ink-muted: var(--sc-gray-50); --sc-ink-subtle: var(--sc-gray-60); --sc-border: #2A2D38; --sc-border-strong: #3A3E4A; --sc-accent: var(--sc-sky); --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --sc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --sc-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); --sc-shadow-focus: 0 0 0 3px rgba(82, 196, 255, 0.35); } /* ============================================================ REDUCED MOTION — acessibilidade WCAG 2.1 Respeita quando o usuário prefere menos animações. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --sc-dur-fast: 0ms; --sc-dur-med: 0ms; --sc-dur-slow: 0ms; } }