/* ============================================================= VagaCidade — Design Tokens Única fonte de verdade visual do produto. Nenhum valor de cor, espaçamento, raio, sombra, z-index ou duração deve existir fora deste arquivo. Trocar a identidade = editar apenas aqui. ============================================================= */ @layer tokens { :root { /* --------------------------------------------------------- 1. PALETA BRUTA (não usar direto nos componentes) --------------------------------------------------------- */ /* Azul-marinho — a base histórica da marca, aprofundada */ --palette-navy-950: #04101c; --palette-navy-900: #071a2b; --palette-navy-800: #0d2439; --palette-navy-700: #14314b; --palette-navy-600: #1d4260; --palette-navy-500: #2b5a7d; /* Azul de ação */ --palette-blue-700: #1d4ed8; --palette-blue-600: #2563eb; --palette-blue-500: #3b82f6; --palette-blue-300: #93c5fd; --palette-blue-200: #bfdbfe; /* Verde-azulado — entrar, confirmar, disponível */ --palette-teal-800: #0b5f59; --palette-teal-700: #0f766e; --palette-teal-300: #5eead4; /* Vermelho — sair, apagar, destrutivo */ --palette-red-700: #b91c1c; --palette-red-600: #dc2626; --palette-red-300: #fca5a5; /* Âmbar — atenção, saldo insuficiente, análise */ --palette-amber-700: #b45309; --palette-amber-300: #fcd34d; /* Neutros claros */ --palette-white: #ffffff; --palette-mist-050: #f4f8fb; --palette-mist-100: #dce7f1; --palette-mist-300: #9fb3c8; --palette-mist-400: #869cb2; /* --------------------------------------------------------- 2. SUPERFÍCIES --------------------------------------------------------- */ --surface-canvas: var(--palette-navy-900); --surface-raised: var(--palette-navy-800); --surface-overlay: var(--palette-navy-700); --surface-sunken: var(--palette-navy-950); --surface-inverse: var(--palette-white); --surface-hover: rgb(255 255 255 / 6%); --surface-pressed: rgb(255 255 255 / 10%); --surface-scrim: rgb(4 16 28 / 72%); --surface-sheen: rgb(255 255 255 / 7%); /* Atmosfera do fundo: a arte bg.png cobrindo a viewport, sob um véu navy que mantém o texto sobre o canvas legível. O gradiente é mais denso embaixo, onde ficam a doca e o conteúdo. */ --surface-atmosphere: linear-gradient(rgb(4 16 28 / 66%), rgb(4 16 28 / 80%)), url("/images/bg.png"); /* --------------------------------------------------------- 3. TEXTO --------------------------------------------------------- */ --text-strong: var(--palette-mist-050); --text-default: var(--palette-mist-100); --text-muted: var(--palette-mist-300); --text-subtle: var(--palette-mist-400); --text-on-accent: var(--palette-white); --text-on-inverse: var(--palette-navy-900); --text-link: var(--palette-blue-300); /* --------------------------------------------------------- 4. BORDAS E DIVISORES Duas famílias, por um motivo prático: bordas decorativas (cartões, divisores) podem ser discretas, mas a borda que delimita um CONTROLE é a única pista de que ali dá para digitar ou tocar — e precisa de 3:1 contra o fundo (WCAG 2.2, 1.4.11). Por isso `--border-control` é bem mais clara que `--border-subtle`. --------------------------------------------------------- */ --border-subtle: rgb(29 66 96 / 55%); --border-default: var(--palette-navy-600); --border-strong: var(--palette-navy-500); --border-inverse: rgb(255 255 255 / 22%); --palette-steel-500: #5183ae; --palette-steel-300: #74a4cc; --border-control: var(--palette-steel-500); --border-control-hover: var(--palette-steel-300); /* --------------------------------------------------------- 5. CORES SEMÂNTICAS DE AÇÃO --------------------------------------------------------- */ --accent-fill: var(--palette-blue-600); --accent-fill-hover: var(--palette-blue-700); --accent-text: var(--palette-blue-300); --accent-ring: rgb(59 130 246 / 45%); --positive-fill: var(--palette-teal-700); --positive-fill-hover: var(--palette-teal-800); --positive-text: var(--palette-teal-300); --danger-fill: var(--palette-red-600); --danger-fill-hover: var(--palette-red-700); --danger-text: var(--palette-red-300); --warning-fill: var(--palette-amber-700); --warning-text: var(--palette-amber-300); /* --------------------------------------------------------- 6. TIPOGRAFIA Stack local-first: usa a melhor fonte já instalada no sistema. Zero requisição de rede, zero CLS — decisivo para um PWA usado majoritariamente em Android de entrada. --------------------------------------------------------- */ --font-display: "Segoe UI Variable Display", "SF Pro Display", "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Roboto Mono", "Cascadia Mono", Menlo, Consolas, monospace; --fs-2xs: 0.6875rem; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.9375rem; --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --fs-xl: clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem); --fs-2xl: clamp(1.5rem, 1.28rem + 1.1vw, 2rem); --fs-3xl: clamp(1.875rem, 1.45rem + 2.1vw, 2.875rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.55; --lh-relaxed: 1.7; --ls-tight: -0.015em; --ls-normal: 0; --ls-wide: 0.04em; --ls-caps: 0.08em; /* --------------------------------------------------------- 7. ESPAÇAMENTO (base 4px) --------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* --------------------------------------------------------- 8. RAIOS --------------------------------------------------------- */ --radius-xs: 0.375rem; --radius-sm: 0.625rem; --radius-md: 0.875rem; --radius-lg: 1.125rem; --radius-xl: 1.5rem; --radius-pill: 999px; --radius-circle: 50%; /* --------------------------------------------------------- 9. SOMBRAS --------------------------------------------------------- */ --shadow-1: 0 1px 2px rgb(4 16 28 / 30%); --shadow-2: 0 4px 12px rgb(4 16 28 / 38%); --shadow-3: 0 12px 32px rgb(4 16 28 / 48%); --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 5%); --focus-ring: 0 0 0 3px var(--accent-ring); /* --------------------------------------------------------- 10. Z-INDEX --------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-loader: 600; /* --------------------------------------------------------- 11. MOVIMENTO --------------------------------------------------------- */ --dur-instant: 90ms; --dur-fast: 150ms; --dur-normal: 230ms; --dur-slow: 360ms; --ease-out: cubic-bezier(0.22, 0.8, 0.32, 1); --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1); /* --------------------------------------------------------- 12. LAYOUT --------------------------------------------------------- */ --gutter: clamp(1rem, 4vw, 2rem); --content-narrow: 26rem; --content-default: 44rem; --content-wide: 68rem; --app-bar-height: 3.75rem; --tap-target: 2.75rem; --icon-sm: 1rem; --icon-md: 1.25rem; --icon-lg: 1.5rem; } /* Em telas muito grandes (TV/ultrawide) o conteúdo não deve esticar; cresce a escala base para manter a legibilidade. */ @media (min-width: 120rem) { :root { --fs-md: 1rem; --content-default: 52rem; --content-wide: 84rem; } } }