/* ============================================================================
BunHouse — fonts.css
----------------------------------------------------------------------------
100% OFFLINE. Every @font-face below points at a .woff2 file that lives in
./fonts/ next to this stylesheet. There is no @import, no CDN, no network
request of any kind. Safe to load from a file:// URL inside Electron.
Families bundled
----------------
1. Plus Jakarta Sans — the UI typeface for everything: headings, body,
labels, buttons, nav. Variable weight 200..800, so
the 400 / 500 / 600 / 700 steps the design system
asks for are all available from one file.
2. Playfair Display — the display serif from the cafe's own emblem. Used
ONLY for titles (page, card, modal) through
--font-serif; never for body copy, labels or
figures. Variable weight 400..700.
3. JetBrains Mono — numeric / telemetry typeface. Used ONLY through the
.num / .mono helpers and the numeric component
classes (metric values, table money columns, SKUs,
lot ids, timestamps). Variable weight 100..800; the
system uses 500 and 600.
4. Material Symbols Outlined — the icon font (variable, ligature driven).
Write the icon name as the element's text content:
inventory_2
Subsetting
----------
Each text family ships as two files: `latin` and `latin-ext`. The browser
only downloads/parses latin-ext when a glyph in that range is actually used,
which is what the unicode-range descriptors below are for.
font-display
------------
Text faces use `swap` (text is readable immediately in the fallback, then
re-renders). The icon font uses `block` on purpose — with `swap` you would
briefly see the raw ligature text ("inventory_2") before the glyph loads,
which looks broken. Local files resolve in a few ms so the block period is
invisible in practice.
========================================================================= */
/* ---------------------------------------------------------------------------
1. Plus Jakarta Sans (variable, 200..800)
------------------------------------------------------------------------ */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('fonts/plus-jakarta-sans-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;
}
/* ---------------------------------------------------------------------------
2. Playfair Display (variable, 400..700) — the brand's display serif
The lettering on the emblem is a serif; the titles echo it. Downloaded from
Google Fonts and bundled here like the others — the app must keep working
with no network at all, so there is still no @import and no CDN.
------------------------------------------------------------------------ */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('fonts/playfair-display-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: 'Playfair Display';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('fonts/playfair-display-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;
}
/* ---------------------------------------------------------------------------
3. JetBrains Mono (variable, 100..800) — numerics & telemetry
------------------------------------------------------------------------ */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url('fonts/jetbrains-mono-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: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url('fonts/jetbrains-mono-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;
}
/* ---------------------------------------------------------------------------
4. Material Symbols Outlined (variable icon font, ligature based)
------------------------------------------------------------------------ */
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 100 700;
font-display: block;
src: url('fonts/material-symbols-outlined.woff2') format('woff2');
}
/* Base icon class.
Usage: local_shipping
Size it with the .icon--* modifiers below (never with an inline style). */
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 20px; /* system default icon size */
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
flex: 0 0 auto;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
user-select: none;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* --- Icon size modifiers -------------------------------------------------- */
.icon--xs { font-size: 14px; } /* inline with label-xs / delta arrows */
.icon--sm { font-size: 16px; } /* inside chips, small buttons, table cells */
.icon--md { font-size: 18px; } /* default button / form adornment icon */
.icon--lg { font-size: 20px; } /* sidebar nav, topbar */
.icon--xl { font-size: 22px; } /* metric-card__icon */
.icon--2xl { font-size: 24px; } /* section headers, empty states */
.icon--3xl { font-size: 32px; } /* large empty-state / hero glyphs */
/* --- Icon weight / fill modifiers ---------------------------------------- */
.icon--filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon--thin { font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24; }
.icon--bold { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
/* --- Icon colour modifiers (semantic, token driven) ----------------------- */
.icon--primary { color: var(--color-primary); }
.icon--secondary { color: var(--color-secondary); }
.icon--tertiary { color: var(--color-tertiary); }
.icon--danger { color: var(--color-danger); }
.icon--muted { color: var(--color-text-muted); }
.icon--subtle { color: var(--color-text-subtle); }
.icon--inverse { color: var(--color-text-inverse); }