/* ============================================================ Fynity · ERP — landing page tokens.css — variáveis de tema, fontes e motivos de marca. Paleta Aco & Laranja-sinal, extraida do produto (frontend/src/styles/globals.css). Dois escopos: .t-dark (canônico) e .t-light ("Claro"). ============================================================ */ :root { /* Tipografia (Google Fonts, carregadas no ) */ --font-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif; --font-sans: "Funnel Sans", "Helvetica Neue", system-ui, sans-serif; --font-mono: "Azeret Mono", ui-monospace, "Cascadia Mono", monospace; /* Métricas globais */ --radius: 0.375rem; /* 6px — mesmo raio do produto */ --radius-sm: 0.25rem; --container: 1180px; --container-wide: 1360px; --nav-h: 64px; /* Trackings do produto */ --track-peak: -0.038em; --track-ridge: -0.024em; --track-wide: 0.06em; --track-widest: 0.16em; /* Easing padrão do produto ("discreto, sem quicar") */ --ease-peak: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-reveal: 640ms; } /* ------------------------------------------------------------ Escopo ESCURO — tema canônico ("Glacial noturno") ------------------------------------------------------------ */ .t-dark { --midnight: 210 12% 7%; /* fundo */ --midnight-shell: 210 14% 5%; /* borda externa mais funda */ --slate-deep: 210 10% 20%; /* cards / janelas */ --slate-deeper: 210 12% 13%; /* painéis internos, inputs */ --glacier: 210 9% 27%; /* bordas */ --glacier-faint: 210 9% 22%; /* divisores sutis */ --ice-vein: 205 40% 49%; /* azul da marca */ --ice-vein-hot: 205 50% 52%; /* hover / brilho */ --snowfield: 210 8% 52%; /* texto secundário */ --powder: 210 12% 77%; /* chips, texto secundário pequeno */ --cloud: 210 16% 89%; /* hover claro */ --summit: 210 12% 94%; /* texto principal */ --ember: 20 84% 45%; /* CTA — uso exclusivo */ --ember-fire: 22 88% 57%; /* hover de CTA, alertas */ --warm-mist: 24 70% 86%; /* superfície de aviso */ --pulse-good: 150 48% 50%; /* verde aurora */ --pulse-warn: 48 88% 58%; /* âmbar */ /* Texto de leitura da página. O --snowfield do produto (52%) rende 4.44:1 sobre o midnight e 3.28:1 sobre os cards — abaixo do AA. Este tom, um passo mais claro, passa em todos os fundos e continua na mesma família. O --snowfield original segue em uso dentro dos mocks, que devem parecer exatamente com o sistema. */ --body: 210 10% 62%; /* Intensidade da atmosfera (glows de fundo) */ --atmo-ice: 0.18; --atmo-ember: 0.08; --grid-alpha: 0.16; color-scheme: dark; } /* ------------------------------------------------------------ Escopo CLARO — tema "Claro" ("Manhã na neve") ------------------------------------------------------------ */ .t-light { --midnight: 210 22% 97%; /* fundo */ --midnight-shell: 210 20% 94%; --slate-deep: 0 0% 100%; /* cards */ --slate-deeper: 210 26% 98%; --glacier: 210 16% 88%; /* bordas */ --glacier-faint: 210 18% 93%; --ice-vein: 208 48% 34%; /* */ --ice-vein-hot: 208 52% 30%; --snowfield: 210 14% 34%; /* texto secundário */ --powder: 210 16% 44%; /* */ --cloud: 210 22% 95%; --summit: 212 24% 13%; /* texto principal */ --ember: 18 80% 41%; /* CTA no claro */ --ember-fire: 20 72% 51%; /* */ --warm-mist: 24 78% 93%; --pulse-good: 150 60% 36%; --pulse-warn: 44 90% 38%; /* no claro, o próprio snowfield já rende 7.66:1 */ --body: 210 14% 34%; --atmo-ice: 0.06; --atmo-ember: 0.04; --grid-alpha: 0.55; color-scheme: light; } /* ------------------------------------------------------------ Sombras (recalculadas por escopo via variáveis acima) ------------------------------------------------------------ */ .t-dark, .t-light { --shadow-peak: 0 0 0 1px hsl(var(--glacier)), 0 10px 30px -12px hsl(var(--midnight-shell)); --shadow-peak-active: 0 0 0 1px hsl(var(--ice-vein)), 0 0 24px -6px hsl(var(--ice-vein) / 0.35), 0 20px 40px -12px hsl(var(--midnight-shell)); --shadow-ember-glow: 0 0 0 1px hsl(var(--ember)), 0 0 32px -8px hsl(var(--ember) / 0.6); --shadow-inset-glacier: inset 0 1px 0 0 hsl(var(--glacier) / 0.6); } /* ------------------------------------------------------------ Motivos de marca ------------------------------------------------------------ */ /* Kicker: — Label · Sublabel — */ .kicker { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--track-widest); text-transform: uppercase; color: hsl(var(--body)); } .kicker--ember { color: hsl(var(--ember-fire)); } /* Régua-pico: 1px gradiente transparente → glacier → transparente */ .peak-rule { height: 1px; border: 0; margin: 0; background: linear-gradient( 90deg, transparent, hsl(var(--glacier)) 18%, hsl(var(--ice-vein) / 0.8) 50%, hsl(var(--glacier)) 82%, transparent ); } .peak-rule--ember { background: linear-gradient( 90deg, transparent, hsl(var(--ember) / 0.9) 50%, transparent ); } /* Losango 45° — marcador padrão da marca */ .diamond { display: inline-block; width: 6px; height: 6px; transform: rotate(45deg); background: hsl(var(--ice-vein)); flex: none; } .diamond--ember { background: hsl(var(--ember-fire)); } .diamond--hollow { background: transparent; border: 1.5px solid hsl(var(--ice-vein) / 0.7); } /* Números técnicos */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; } /* Aviso com ▲ (o triângulo entra no HTML) */ .alert-inline { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: hsl(var(--pulse-warn)); } /* ------------------------------------------------------------ Fundos de seção ------------------------------------------------------------ */ /* Atmosfera: luz fria descendo do cume + brasa no canto inferior */ .atmo { background-color: hsl(var(--midnight)); background-image: radial-gradient(ellipse 80% 50% at 50% -10%, hsl(var(--ice-vein) / var(--atmo-ice)), transparent 60%), radial-gradient(ellipse 60% 30% at 100% 100%, hsl(var(--ember) / var(--atmo-ember)), transparent 70%), linear-gradient(180deg, hsl(var(--midnight-shell)) 0%, hsl(var(--midnight)) 40%, hsl(var(--midnight)) 100%); } /* Grade glacial 48px com máscara radial (some nas bordas) */ .grid-bg { position: relative; } .grid-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(hsl(var(--glacier-faint) / var(--grid-alpha)) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--glacier-faint) / var(--grid-alpha)) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%); } /* Seleção e foco — assinatura ember do produto */ ::selection { background: hsl(var(--ember) / 0.4); color: hsl(var(--summit)); } :focus-visible { outline: 2px solid hsl(var(--ember)); outline-offset: 2px; border-radius: 2px; }