/* =====================================================================
Cartonia — typography layer
---------------------------------------------------------------------
Requires tokens.css. Load it first:
Fonts are self-hosted (no CDN call at runtime, nothing leaves the
visitor's browser). Subset to Latin + Romanian; both the correct
comma-below forms (ș ț) and the legacy cedilla forms (ş ţ) are
included, so imported supplier data renders without tofu.
Licences: Archivo, Source Serif 4 and IBM Plex Mono are all SIL OFL 1.1.
===================================================================== */
/* --- Archivo — variable, wght 400–700, wdth 100–112 ---------------- */
@font-face {
font-family: 'Archivo';
src: url('./fonts/archivo-var.woff2') format('woff2');
font-weight: 400 700;
font-stretch: 100% 112%;
font-style: normal;
font-display: swap;
}
/* --- Source Serif 4 — variable, wght 400–700, opsz pinned at 18 ---- */
@font-face {
font-family: 'Source Serif 4';
src: url('./fonts/source-serif-4-var.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
/* --- IBM Plex Mono — 400 and 500 ----------------------------------- */
@font-face {
font-family: 'IBM Plex Mono';
src: url('./fonts/plex-mono-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('./fonts/plex-mono-500.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* =====================================================================
Base
===================================================================== */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
background: var(--surface-canvas);
color: var(--text-primary);
font-family: var(--font-text);
font-size: var(--text-body);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis-weight: none;
}
/* Headings carry the brand voice. Display sits slightly wide, echoing
the mark's bands; everything else stays at normal width. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-brand);
font-weight: var(--weight-semibold);
color: var(--text-primary);
text-wrap: balance;
margin: 0;
}
h1 {
font-size: var(--text-h1);
line-height: var(--leading-h1);
letter-spacing: var(--tracking-h1);
font-variation-settings: 'wdth' var(--wdth-display);
}
h2 {
font-size: var(--text-h2);
line-height: var(--leading-h2);
letter-spacing: var(--tracking-h2);
}
h3 {
font-size: var(--text-h3);
line-height: var(--leading-h3);
letter-spacing: var(--tracking-h3);
}
h4, h5, h6 {
font-size: var(--text-h4);
line-height: var(--leading-h4);
letter-spacing: var(--tracking-h4);
}
p {
margin: 0;
max-width: var(--measure);
text-wrap: pretty;
}
strong, b { font-weight: var(--weight-semibold); }
small { font-size: var(--text-sm); line-height: var(--leading-sm); }
code, kbd, samp, pre {
font-family: var(--font-mono);
font-size: 0.92em;
font-variant-ligatures: none;
}
/* Permanent underline on in-text links — a typographic convention, not
a hover reward. Clay is a surface colour and never used for text. */
a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--line-strong);
transition: text-decoration-color var(--dur-1) var(--ease);
}
a:hover { text-decoration-color: currentColor; }
:focus-visible {
outline: var(--focus-width) solid var(--focus-ring);
outline-offset: var(--focus-offset);
border-radius: var(--radius-sm);
}
/* =====================================================================
Utilities
Use these instead of restating sizes. Every value comes from a token.
===================================================================== */
.t-display {
font-family: var(--font-brand);
font-weight: var(--weight-bold);
font-size: var(--text-display);
line-height: var(--leading-display);
letter-spacing: var(--tracking-display);
font-variation-settings: 'wdth' var(--wdth-display);
text-wrap: balance;
}
.t-h1 { font-family: var(--font-brand); font-weight: var(--weight-semibold);
font-size: var(--text-h1); line-height: var(--leading-h1);
letter-spacing: var(--tracking-h1);
font-variation-settings: 'wdth' var(--wdth-display); }
.t-h2 { font-family: var(--font-brand); font-weight: var(--weight-semibold);
font-size: var(--text-h2); line-height: var(--leading-h2);
letter-spacing: var(--tracking-h2); }
.t-h3 { font-family: var(--font-brand); font-weight: var(--weight-semibold);
font-size: var(--text-h3); line-height: var(--leading-h3);
letter-spacing: var(--tracking-h3); }
.t-h4 { font-family: var(--font-brand); font-weight: var(--weight-semibold);
font-size: var(--text-h4); line-height: var(--leading-h4);
letter-spacing: var(--tracking-h4); }
.t-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
.t-body { font-size: var(--text-body); line-height: var(--leading-body); }
.t-sm { font-size: var(--text-sm); line-height: var(--leading-sm); }
.t-caption { font-size: var(--text-caption); line-height: var(--leading-caption);
letter-spacing: var(--tracking-caption); }
/* Interface chrome — buttons, nav, labels, table headers. */
.t-ui {
font-family: var(--font-brand);
font-weight: var(--weight-medium);
font-size: var(--text-sm);
line-height: 1.2;
font-variation-settings: 'wdth' var(--wdth-ui);
}
/* Anything that is a code or a measurement: FEFCO 0201, 400×300×250,
EB flute, a phone number, a lead time. Never used for prose. */
.t-spec {
font-family: var(--font-mono);
font-weight: var(--weight-medium);
font-size: var(--text-spec);
line-height: var(--leading-spec);
letter-spacing: var(--tracking-spec);
text-transform: uppercase;
}
/* Digits that must line up in a column. */
.t-tabular { font-variant-numeric: tabular-nums; }
.t-muted { color: var(--text-muted); }
.t-faint { color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}