/* =========================================================
Atypical Tech — Design Tokens (HSL) + base utilities
Spec: APPLYATYPICALDESIGN.md (Atypical Design System)
========================================================= */
/* ---------------------------------------------------------
Inter, servido por nós.
Vinha do Google Fonts como no , e uma folha de estilo de
terceiros bloqueia o render: o browser tinha de resolver DNS, negociar TLS e
descarregar o CSS noutro domínio antes de pintar o primeiro pixel. Media-se
nos números: o FCP era 2,84–2,89 s nas cinco páginas medidas, praticamente
igual independentemente do conteúdo — um custo que não vinha da página.
O ficheiro é o mesmo para os quatro pesos porque o Inter é hoje uma fonte
variável. Daí `font-weight: 100 900`: um só woff2 por subconjunto cobre o
400, o 500, o 600 e o 700, e são 133 KB em vez dos 534 KB que quatro cópias
do mesmo ficheiro custariam.
`swap` para que o texto apareça imediatamente na fonte do sistema e troque
quando o Inter chegar — nunca há um período de texto invisível.
--------------------------------------------------------- */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/inter-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: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fonts/inter-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;
}
/* Outfit carrega os títulos (Design System Atypical: display/h1–h3). Mesmo esquema do
Inter: fonte variável, um woff2 por subconjunto cobre 500–700, servida por nós. */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('fonts/outfit-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: 'Outfit';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('fonts/outfit-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;
}
/* Paleta do Design System Atypical (APPLYATYPICALDESIGN.md). Os HSL abaixo são conversões
exatas dos hex do documento — ink #395061, accent #17739F (light) / #6FC2EA (dark),
neutros com viés ~205°. Cada token existe nos DOIS temas; um componente nunca nomeia cor. */
:root {
--background: 210 40% 98%; /* page #F8FAFC */
--foreground: 205.5 26% 30.2%; /* ink #395061 */
--card: 0 0% 100%; /* surface #FFFFFF */
--card-foreground: 205.5 26% 30.2%;
--popover: 0 0% 100%; /* raised #FFFFFF */
--popover-foreground: 205.5 26% 30.2%;
--primary: 199.4 74.7% 35.7%; /* accent #17739F */
--primary-foreground: 0 0% 100%; /* #FFFFFF */
--secondary: 205.7 33.3% 95.9%; /* sunken #F1F5F8 */
--secondary-foreground: 205.5 26% 30.2%;
--muted: 205.7 33.3% 95.9%; /* #F1F5F8 */
--muted-foreground: 207.6 17.9% 40.6%; /* #55697A */
--accent: 203.3 60% 94.1%; /* accent-quiet #E7F2F9 */
--accent-foreground: 199.4 74.7% 35.7%;
--destructive: 3 54.3% 49.8%; /* danger #C4413A */
--destructive-foreground: 0 0% 100%;
--border: 208.2 25.4% 86.9%; /* hairline #D5DEE6 */
--input: 207.5 20.7% 77.3%; /* border-strong #B9C6D1 */
--ring: 199.4 74.7% 35.7%; /* accent #17739F */
--radius: 0.625rem; /* md 10px */
/* Elevação (design system: borda primeiro, sombra depois). Sombra tingida do ink
#111A21 em vez de preto puro, para ficar na mesma família da paleta. */
--shadow-1: 0 1px 2px rgb(17 26 33 / 0.06);
--shadow-2: 0 2px 8px -2px rgb(17 26 33 / 0.10);
--shadow-3: 0 8px 24px -6px rgb(17 26 33 / 0.16);
}
.dark {
--background: 206.2 32% 9.8%; /* page #111A21 */
--foreground: 205 33.3% 92.9%; /* text #E7EEF3 */
--card: 205.7 30.4% 13.5%; /* surface #18242D */
--card-foreground: 205 33.3% 92.9%;
--popover: 205.4 29.5% 17.3%; /* raised #1F2E39 */
--popover-foreground: 205 33.3% 92.9%;
--primary: 199.5 74.5% 67.6%; /* accent #6FC2EA */
--primary-foreground: 206.2 32% 9.8%; /* inverte no dark: #111A21 */
--secondary: 210 30.6% 19.2%; /* inset #223140 */
--secondary-foreground: 205 33.3% 92.9%;
--muted: 210 30.6% 19.2%;
--muted-foreground: 205.5 20.8% 68.8%; /* #9FB2C0 */
--accent: 201.8 37.9% 17.1%; /* accent-quiet: sky a 14% sobre a page */
--accent-foreground: 199.5 74.5% 67.6%;
--destructive: 5.4 78.9% 72.2%; /* danger #F08A80 */
--destructive-foreground: 206.2 32% 9.8%; /* inverte no dark */
--border: 205.2 26.1% 23.3%; /* #2C3E4B */
--input: 206.2 24.2% 31.6%; /* border-strong #3D5364 */
--ring: 199.5 74.5% 67.6%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.9375rem; /* body 15/24 na escala do design system */
background: hsl(var(--background));
color: hsl(var(--foreground));
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* Escala tipográfica do design system: títulos em Outfit com tracking negativo;
h4 fica em Inter 600, como o documento define. */
h1, h2, h3 {
font-family: 'Outfit', 'Segoe UI', sans-serif;
letter-spacing: -0.02em;
text-wrap: balance;
}
h3 { letter-spacing: -0.01em; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* `` no Routes.razor põe tabindex="-1" no título e foca-o,
para que um leitor de ecrã anuncie a página nova. Com a home renderizada estaticamente
isso passou a acontecer também no primeiro carregamento, e o Chromium desenhava um anel
de foco azul à volta do