/* =========================================================================== CLM · TIROMA — Tokens --------------------------------------------------------------------------- A fonte única de verdade para espaço, tipo, cor, raio e elevação. REGRA: nenhum ficheiro de estilo escreve um valor cru. Se precisa de um número que não está aqui, ou existe já um token que serve, ou falta um token — e nesse caso acrescenta-se aqui, não no sítio onde deu jeito. Foi a ausência desta regra que produziu 35 espaçamentos e 8 raios diferentes. =========================================================================== */ /* --- Tipografia: Barlow Condensed (títulos) + Barlow (texto) --------------- Estáticas, não variáveis — a família não tem eixo variável no Google Fonts. Só os pesos que o site usa mesmo: 400/600/700 no texto, 700 nos títulos. Para PT e EN só o subconjunto `latin` chega a ser descarregado; o `latin-ext` existe por segurança e nunca é pedido (unicode-range trata disso). Licença SIL OFL 1.1 — ver public/fonts/README.md. */ @font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/barlow-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/barlow-600-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/barlow-700-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/barlow-700-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root { /* --- Famílias ------------------------------------------------------ */ --font-head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --- Escala tipográfica ------------------------------------------- O Barlow corre pequeno: a base é 17px e não 16px. Os títulos usam a condensada, que deixa caber frases longas em corpo muito maior — é essa a razão de ser da escolha da fonte. */ /* --fs-2xs existe por causa do backoffice: etiquetas em maiúsculas, cabeçalhos de tabela e pills precisam de descer abaixo do --fs-xs. O site público não o usa — e não deve começar a usar. */ --fs-2xs: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-md: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem); --fs-lg: clamp(1.1875rem, 1vw + 1rem, 1.375rem); --fs-xl: clamp(1.625rem, 2.2vw + 1rem, 2.375rem); --fs-2xl: clamp(2.125rem, 4vw + 1rem, 3.5rem); /* O topo da escala serve só o título do hero. Estava em 5.25rem (84px), calibrado para um título de meia dúzia de palavras; com a frase de posicionamento actual, de 109 caracteres, dava cinco linhas e 428px só de título. A 3.75rem cabe em três linhas sem deixar de mandar na página — e continua acima do --fs-2xl dos cabeçalhos das páginas interiores, que é o que mantém a hierarquia entre a home e o resto. */ --fs-3xl: clamp(2.5rem, 3.7vw + 1rem, 3.75rem); --fs-num: clamp(2.25rem, 3.4vw + 1rem, 3.75rem); --lh-tight: 1.02; /* títulos grandes condensados */ --lh-head: 1.1; /* 1.7 e não 1.6: com o texto a ocupar a largura toda, as linhas são longas e o olho precisa de mais espaço para encontrar a linha seguinte. */ --lh-body: 1.7; --lh-loose: 1.75; --tr-tight: -0.015em; --tr-wide: 0.14em; /* kickers e etiquetas em maiúsculas */ /* --- Espaço: base 4px, nove degraus, e mais nenhum ----------------- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 5rem; /* 80px */ --sp-9: 8rem; /* 128px */ /* Padding vertical de secção. Passou por dois ajustes: era 36px (apertado de mais), subiu para 80/128px e ficou o contrário — em secções de conteúdo curto, 256px de padding contra 377px de conteúdo davam mais vazio do que texto. Ficou em 48/80px. */ --section-y: var(--sp-7); /* --- Medidas de coluna --------------------------------------------- O texto corrido passou a ocupar a largura do enquadramento. Antes era limitado a 72ch, o que dava 773px dentro de um container de 1140px — sobravam 367px vazios à direita e o texto partia linhas cedo de mais. É uma medida longa para leitura contínua; compensa-se com entrelinha maior (--lh-body) e justificação. */ --w-wide: 1280px; --w-page: 1140px; --w-prose: 100%; --w-head: 100%; /* --- Cor: escalas cruas -------------------------------------------- */ --navy-950: #070a18; --navy-900: #0b0f26; --navy-800: #111634; --navy-700: #1a2047; --navy-600: #262e5c; --navy-500: #3a4478; /* O vermelho da marca (#ed1c24) tem 4.38 de contraste sobre branco — abaixo dos 4.5 que a WCAG AA exige para texto normal. Fica como cor de marca para fundos, filetes e ícones (onde bastam 3:1) e há dois tons ao lado só para TEXTO: --red-550 sobre claro (5.02) e --red-400 sobre escuro (5.21 em cartão navy). Ver os tokens semânticos --accent e --accent-text. */ --red-600: #c8141b; --red-550: #dc1720; /* texto e botão primário sobre fundo claro */ --red-500: #ed1c24; /* marca: fundos, filetes, ícones */ --red-400: #ff4d55; /* texto sobre fundo escuro */ --n-0: #ffffff; --n-50: #f6f8fb; --n-100: #eef1f7; --n-200: #e3e8f1; --n-400: #8e99ad; /* só para elementos não textuais */ --n-500: #667287; /* texto de apoio: 4.86 sobre branco */ --n-600: #55617a; --n-800: #2b3444; --n-900: #15233b; /* --- Cor: tokens semânticos (tema claro, o que vale por omissão) ---- É esta indirecção que faz o modo escuro funcionar: as secções escuras redefinem estes seis tokens e todos os componentes lá dentro adaptam-se sozinhos, sem uma única variante escrita à mão. */ --surface: var(--n-0); --surface-2: var(--n-50); --surface-raised: var(--n-0); --text: var(--n-600); --text-strong: var(--n-900); --text-muted: var(--n-500); --border: var(--n-200); --accent: var(--red-500); /* marca: fundos, filetes, ícones */ --accent-text: var(--red-550); /* vermelho legível em texto pequeno */ --accent-contrast:#ffffff; /* --- Raio: três, mais a pílula ------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px; /* --- Elevação: três degraus, todos na mesma matiz ------------------ */ --sh-1: 0 1px 2px rgba(11, 15, 38, .06), 0 2px 8px rgba(11, 15, 38, .05); --sh-2: 0 4px 12px rgba(11, 15, 38, .08), 0 12px 28px rgba(11, 15, 38, .07); --sh-3: 0 12px 28px rgba(11, 15, 38, .12), 0 32px 64px rgba(11, 15, 38, .12); /* --- Movimento ------------------------------------------------------ */ --ease: cubic-bezier(.22, .61, .36, 1); --dur-1: .16s; --dur-2: .28s; --dur-3: .42s; /* --- Estado: trios fundo / limite / texto --------------------------- Seis estados, cada um com o seu par verificado. Nasceram das seis variantes de `.pill` e dos três `.alert` que o backoffice tinha escritos à mão; vivem aqui porque os formulários públicos vão precisar dos mesmos. O texto é sempre lido SOBRE o `-bg` correspondente — nunca sobre branco, onde vários destes tons falhariam. */ --ok-bg: #e7f6ec; --ok-border: #b6e0c4; --ok-text: #1e7e44; --warn-bg: #fff3df; --warn-border: #f3d9a8; --warn-text: #9a6400; --info-bg: #e6f0fb; --info-border: #c3d9f2; --info-text: #1f5fa8; --danger-bg: #fdecea; --danger-border: #f5c6c2; --danger-text: var(--red-600); /* "à espera de resposta" — no funil de cotações é o estado `quoted`: a proposta saiu e a bola está do lado do cliente. */ --wait-bg: #ede7fb; --wait-border: #d3c6f2; --wait-text: #5b3bb0; --neutral-bg: var(--n-100); --neutral-border: var(--n-200); /* --n-600 e não --n-500: em pill (12px a bold) sobre --neutral-bg o --n-500 dá 4.23 e a WCAG AA pede 4.5. Este dá 5.32. */ --neutral-text: var(--n-600); /* Tingimento da marca para estados activos sobre superfície escura, e véu para as camadas modais. Fixos em rgba porque têm de compor com o que está por baixo — um token de cor sólida não serviria. */ --accent-wash: rgba(237, 28, 36, .14); --scrim: rgba(7, 10, 24, .5); /* --- Backoffice ----------------------------------------------------- A base é 16px e não os 17px do site público: o backoffice é denso — tabelas, formulários longos — e 17px empurrava as listagens para scroll horizontal sem ganhar nada em legibilidade. É a única divergência deliberada entre as duas metades do produto. */ --admin-base: 16px; --sb-w: 252px; --w-admin: 1180px; } @media (min-width: 900px) { :root { --section-y: var(--sp-8); } } /* --------------------------------------------------------------------------- Superfície escura. Redefine só os tokens semânticos — nunca estilos. Qualquer componente colocado aqui dentro passa a escuro sem saber disso. --------------------------------------------------------------------------- */ .on-dark { --surface: var(--navy-900); --surface-2: var(--navy-800); --surface-raised: rgba(255, 255, 255, .05); --text: #b9c1dd; --text-strong: #ffffff; /* #9ba6d1 e não #8f9ac2: o tom anterior tinha 4.04 sobre o cabeçalho translúcido, abaixo do mínimo. Este dá 4.68 aí e 7.90 sobre navy-900. */ --text-muted: #9ba6d1; --border: rgba(255, 255, 255, .13); --accent: var(--red-500); --accent-text: var(--red-400); /* o vermelho da marca é escuro de mais aqui */ background: var(--surface); color: var(--text); }