/* ===================================== Neurosia — Design Tokens Reference This file documents the CSS custom properties defined in global.css. Not loaded as runtime styles — kept as a reference for developers. ===================================== */ /* TOKEN CATALOG (defined in global.css :root) ─────────────────────────────────────── GROUP 1 — Paleta de marca ─────────────────────────────────────── --primary: #ff5d17 Laranja principal (CTAs, links, destaques) --primary-dim: rgba(255,93,23,.12) Fundo sutil para badges/tags ativos --primary-glow: rgba(255,93,23,.2) Glow/hover em cards e hero --accent: #ff9a3d Laranja claro para gradientes/acento ─────────────────────────────────────── GROUP 2 — Superfícies (do mais escuro ao mais claro) ─────────────────────────────────────── --bg: #0a0a0c Fundo principal da página --surface-1: #131418 Cards, seções alternadas, footer --surface-2: #1c1d23 Hover de cards, inputs, drawer mobile --surface-3: #25262e Borders sutis, backgrounds hover ─────────────────────────────────────── GROUP 3 — Texto ─────────────────────────────────────── --text: #f4f4f5 Texto principal (headings, body forte) --text-2: #a1a1aa Texto secundário (parágrafos, descrições) --text-3: #71717a Texto terciário (labels, small, placeholders) ─────────────────────────────────────── GROUP 4 — Bordas ─────────────────────────────────────── --border: rgba(255,255,255,.08) Bordas sutis (dividers, cards) --border-strong: rgba(255,255,255,.14) Bordas mais visíveis (inputs focus) ─────────────────────────────────────── GROUP 5 — Estados ─────────────────────────────────────── --success: #4ade80 Verde para feedback positivo --error: #f87171 Vermelho para erros ─────────────────────────────────────── GROUP 6 — Espaçamento (base 4px) ─────────────────────────────────────── --sp-1: 4px Ícone gap, badge padding --sp-2: 8px Gap entre tags, padding small --sp-3: 12px Padding interno de cards pequenos --sp-4: 16px Padding padrão, gap entre itens --sp-5: 20px Margin entre seções internas --sp-6: 24px Padding de seções, gap entre blocos --sp-8: 32px Margin entre seções, padding de cards --sp-10: 40px Seção spacing --sp-12: 48px Hero padding vertical --sp-16: 64px Seção major spacing --sp-20: 80px Seção hero spacing --sp-24: 96px Max spacing ─────────────────────────────────────── GROUP 7 — Tipografia ─────────────────────────────────────── Font family: 'Onest', system-ui, sans-serif Font files: onest-400.woff2, onest-500.woff2, onest-600.woff2, onest-700.woff2 Unicode range: PT-BR essential subset (U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2026) Classes tipográficas: .h1 → clamp(1.75rem, 1.5rem+1.5vw, 3rem) Hero headings .h2 → clamp(1.5rem, 1.25rem+1.25vw, 2.25rem) Section headings .h3 → clamp(1rem, 0.875rem+0.625vw, 1.25rem) Subheadings, card titles .h4 → clamp(.8125rem, 0.75rem+0.3125vw, 0.9375rem) Labels, overlines .lead → clamp(1rem, 0.875rem+0.625vw, 1.25rem) Intro paragraphs .body → 1rem Body text .small → clamp(.8125rem, 0.75rem+0.3125vw, 0.9375rem) Captions, helpers ─────────────────────────────────────── GROUP 8 — Raios de borda ─────────────────────────────────────── --r-sm: 6px Badges, small buttons --r-md: 10px Cards, inputs, dropdowns --r-lg: 14px Large cards, modals --r-xl: 20px Hero images, featured cards --r-full: 9999px Pills, tags, circular avatars ─────────────────────────────────────── GROUP 9 — Sombras ─────────────────────────────────────── --shadow-sm: 0 1px 2px rgba(0,0,0,.3) Subtle elevation --shadow-md: 0 4px 16px rgba(0,0,0,.35) Cards, dropdowns --shadow-lg: 0 12px 40px rgba(0,0,0,.45) Modals, overlays --shadow-glow: 0 0 40px rgba(255,93,23,.15) Primary glow effect ─────────────────────────────────────── GROUP 10 — Layout ─────────────────────────────────────── --container: 1120px Max-width do container --header-h: 64px Altura fixa do header ─────────────────────────────────────────────── GROUP 11 — Transições ─────────────────────────────────────── --t-fast: .15s ease Hover, focus, micro-interactions --t-base: .25s ease Page transitions, dropdowns --t-slow: .4s cubic-bezier(.4,0,.2,1) Complex animations, reveals ─────────────────────────────────────── RESPONSIVE BREAKPOINTS ─────────────────────────────────────── ≤320px → Ultra-small phones (global.css: .btn-lg adjustments, .hero padding) 321–480px → Small phones (default mobile styles) 481–640px → Large phones (grid-2 starts) 641–767px → Tablet portrait gap (grid adjustments) 768–1023px → Tablets (desktop nav hidden, grid-2/3 active) ≥1024px → Desktop (full nav, grid-4, full layout) ─────────────────────────────────────── COMPONENT CLASSES QUICK REF ─────────────────────────────────────── Layout: .container, .hero, .section, .grid-2, .grid-3, .grid-4 Cards: .card, .card-hover, .service-card, .product-card Buttons: .btn, .btn-primary, .btn-secondary, .btn-success, .btn-outline, .btn-lg, .btn-sm, .btn-block Forms: .form-card, .form-group, .form-error, .form-success, .field-error, .char-counter Navigation: .nav, .nav-dropdown, .mobile-header, .mobile-drawer Typography: .h1–.h4, .lead, .body, .small, .badge, .tag, .tag-sm Utilities: .text-center, .text-primary, .text-2, .text-3, .mt-1–.mt-6, .mb-1–.mb-6, .reveal ─────────────────────────────────────── ACCESSIBILITY NOTES ─────────────────────────────────────── • Skip navigation: .skip-link (focus-visible only) • Focus styles: :focus-visible outline with --primary • prefers-reduced-motion: disables animations and transitions • aria-expanded on mobile menu button • aria-describedby on form fields with errors • role="alert" on .field-error spans • Landmarks:
,