/* ============================================================ GLEIDSON ANDRADE — DESIGN SYSTEM (Design Tokens) v1.0 Fundação visual da marca. Consumível por landing e blog (SSG). Autoridade em IA aplicada a negócios · Transformação Digital. ============================================================ */ :root { /* -------------------------------------------------------- 1. COR — Paleta de marca Primária: Ink Navy (autoridade, confiança, profundidade tech) Acento: Azure (inteligência, IA, ação) Signal: Ciano/Teal (dados, insight, destaque IA) Premium: Gold (conquista, prova social, autoridade) -------------------------------------------------------- */ /* Ink / Navy (primária) */ --color-ink-950: #050B18; --color-ink-900: #0A1428; --color-ink-800: #0F1E3D; --color-ink-700: #16294F; --color-ink-600: #1E3A6E; --color-ink-500: #294D8C; --color-ink-400: #4A6DAE; /* Azure (acento primário — IA / ação) */ --color-azure-700: #1D4ED8; --color-azure-600: #2563EB; --color-azure-500: #3B82F6; --color-azure-400: #60A5FA; --color-azure-300: #93C5FD; /* Ciano / Signal (dados, insight IA) */ --color-signal-600: #0891B2; --color-signal-500: #06B6D4; --color-signal-400: #22D3EE; /* Gold (premium / prova social) */ --color-gold-700: #8A6410; /* texto sobre claro — AA 4.5:1 (gold-600 falha) */ --color-gold-600: #B7891F; --color-gold-500: #D4A429; --color-gold-400: #E8C15C; --color-gold-300: #EBC66B; /* highlight/texto gold sobre fundo escuro (badges hero) */ /* Neutros */ --color-white: #FFFFFF; --color-gray-50: #F7F9FC; --color-gray-100: #EEF2F8; --color-gray-200: #DDE4EF; --color-gray-300: #C3CDDE; --color-gray-400: #97A5BD; --color-gray-500: #6B7A96; --color-gray-550: #5A6987; /* muted acessível — AA 4.5:1 sobre branco e gray-50 */ --color-gray-600: #4B5871; --color-gray-700: #33405A; --color-gray-800: #1F2A42; --color-gray-900: #121A2C; /* Semânticos */ --color-success: #16A34A; --color-warning: #D97706; --color-danger: #DC2626; --color-info: var(--color-azure-600); /* Variantes "strong" para TEXTO sobre fundo claro (AA 4.5:1). Use as bases acima apenas para preenchimentos/ícones grandes (3:1). */ --color-success-strong: #0F7A38; --color-warning-strong: #B45309; --color-danger-strong: #C41C1C; /* Papéis semânticos (light) */ --bg-page: var(--color-white); --bg-subtle: var(--color-gray-50); --bg-elevated: var(--color-white); --bg-inverse: var(--color-ink-900); --text-primary: var(--color-ink-900); --text-secondary: var(--color-gray-600); --text-muted: var(--color-gray-550); --text-inverse: var(--color-white); --text-accent: var(--color-azure-600); --border-subtle: var(--color-gray-200); --border-strong: var(--color-gray-300); /* Foco visível — anel AA (contraste ≥3:1 sobre claro e escuro) */ --focus-ring: var(--color-azure-500); --focus-ring-width: 3px; --focus-ring-offset: 2px; /* Gradiente de marca (IA) */ --gradient-brand: linear-gradient(120deg, var(--color-ink-800) 0%, var(--color-azure-700) 60%, var(--color-signal-500) 130%); --gradient-signal: linear-gradient(90deg, var(--color-azure-600), var(--color-signal-500)); /* -------------------------------------------------------- 2. TIPOGRAFIA Display/Headings: "Sora" — geométrica, confiante, tech. Corpo: "Inter" — neutra, altamente legível, profissional. Mono: "JetBrains Mono" — dados, código, métricas. Escala modular 1.250 (Major Third). -------------------------------------------------------- */ --font-display: "Sora", "Segoe UI", system-ui, sans-serif; /* "Inter Fallback" = Arial com métricas casadas (fonts.css) → zero-CLS no swap. */ --font-body: "Inter", "Inter Fallback", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.375rem; /* 22 */ --fs-xl: 1.75rem; /* 28 */ --fs-2xl: 2.25rem; /* 36 */ --fs-3xl: 2.875rem; /* 46 */ --fs-4xl: 3.75rem; /* 60 */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.55; --lh-relaxed: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* -------------------------------------------------------- 3. ESPAÇAMENTO — base 4px -------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* -------------------------------------------------------- 4. RAIOS -------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* -------------------------------------------------------- 5. SOMBRAS (elevação) -------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(10, 20, 40, 0.06); --shadow-sm: 0 2px 8px rgba(10, 20, 40, 0.08); --shadow-md: 0 8px 24px rgba(10, 20, 40, 0.10); --shadow-lg: 0 16px 48px rgba(10, 20, 40, 0.14); --shadow-glow: 0 8px 32px rgba(37, 99, 235, 0.28); /* -------------------------------------------------------- 6. GRID & LAYOUT Container 1200px, 12 colunas, gutter 24px. -------------------------------------------------------- */ --container-max: 1200px; --container-narrow: 760px; /* leitura de blog */ --grid-columns: 12; --grid-gutter: var(--space-5); --section-y: var(--space-9); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 400ms; /* Breakpoints — política canônica do DS (GLE-996) Escala principal: sm 640 · md 768 · lg 1024 · xl 1280 Use SEMPRE um valor desta escala ao criar novas media queries. Tablet (exceção justificada): 900 O intervalo 768–1024 é largo demais para grids editoriais de 3–4 colunas, que ficam apertados antes de 1024. Adotamos UM único ponto de tablet = 900 (consolidou os antigos 820/860/900 avulsos). Não crie outros valores nesse vão. Micro-breakpoints de componente (exceções justificadas, sub-640): 560 — formulários/CTAs de 2 col → 1 col em celular estreito (.form__row, .newsletter-cta__form, .news-grid, .dateline__date) 480 — grids de 2 col → 1 col em celular pequeno (.process-grid, .pillar-grid) 380 — stats de 4 números 2×2 → 1 col em celular muito estreito (.stats-band .grid-4) lg 1024 / xl 1280 não são usados hoje: o conteúdo não pede layout que mude acima de 900px. Reservados para uso futuro. Novos avulsos devem ser evitados ou documentados aqui com justificativa. */ } /* Dark mode — inversão de papéis semânticos (blog/landing dark). DECISÃO (GLE-987): mantido como camada RESERVADA do DS, ativável por opt-in via (candidato: leitura de artigo / Radar). Nenhuma página ativa hoje — é fundação documentada, não código morto. Não remover sem aprovação de design; ativação = follow-up dedicado com QA de contraste AA. */ :root[data-theme="dark"] { --bg-page: var(--color-ink-950); --bg-subtle: var(--color-ink-900); --bg-elevated: var(--color-ink-800); --bg-inverse: var(--color-white); --text-primary: var(--color-gray-50); --text-secondary: var(--color-gray-300); --text-muted: var(--color-gray-400); --text-inverse: var(--color-ink-900); --border-subtle: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); }