@layer tokens, base, layout, components, theme, page-theme, utilities, focus, motion, print;
/* `utilities` je v tomhle vyctu schvalne, i kdyz zadne pravidlo v tomhle souboru do ni
nepatri. Tailwind si vrstvy deklaruje sam (`@layer theme, base, components, utilities`),
ale jeho soubor se nacita az po tomhle - a vrstva, kterou uz nekdo pojmenoval driv, si
drzi puvodni poradi. Bez tohohle radku je `utilities` JMENO NAVIC, takze se pripoji na
konec, tedy ZA `motion`, a opt-out z animaci prestane ucinkovat: pri reduce se dal
animovalo 33 prvku. Poradi vrstev je u Tailwindu posledni misto, kde by to clovek
hledal, proto se cele deklaruje tady, na jednom miste, a ne na dvou. */
/* Cascade layers, declared once here because this file loads first. Later layers win
regardless of source order or specificity.
tokens custom properties for both themes - the only place a colour is written
base reset and bare element defaults
layout structural objects
components the UI blocks, plus each page's own rules confined with :where()
theme light-mode fixes for rules that hardcode a colour
page-theme a page's own light-mode override
motion the reduced-motion opt-out - genuinely the last word - the last word
Within one layer the source order still decides, which is why the parts below are
concatenated in the order the browser used to receive them as separate files. */
/* ============================================================================
PISMA. Z naseho puvodu, ne ze dvou cizich CDN na ctyrech hostech.
Predtim: na api.fontshare.com a fonts.googleapis.com v hlavicce, ktere
teprve odkazovaly na woff2 na cdn.fontshare.com a fonts.gstatic.com. Ctyri cizi
originy a dva sekvencni skoky na kriticke ceste (HTML -> cizi CSS -> cizi woff2),
a fonts.gstatic.com dostaval IP adresu kazdeho navstevnika ceske firmy.
@font-face je ZAMERNE mimo @layer: kaskadove vrstvy plati pro pravidla se
selektorem, @font-face zadny nema a uvnitr vrstvy je jen matouci.
General Sans (Indian Type Foundry, ITF Free Font License v2.0 - viz
fonts/GeneralSans-FFL.txt). Licence self-hosting VYSLOVNE dovoluje a doporucuje
(cl. 01), ale stejne vyslovne ZAKAZUJE jakoukoli upravu vcetne PODSAZENI a
konverze formatu (cl. 02). Proto se tady servirují oficialni webfonty z balicku
z fontshare.com nezmenene, bajt co bajt, a ne podsazena verze. Rezy 400/500/600/700,
kazdy ve svem souboru - prohlizec stahne jen ty, ktere stranka opravdu pouzije
(namereno: 1-2 na stranku), takze jeden variabilni soubor by byl drazsi.
Geist Mono (Vercel, SIL OFL 1.1 - viz fonts/GeistMono-OFL.txt). OFL upravy
dovoluje a font nema Reserved Font Name, takze smi zustat 'Geist Mono'. Je to
variabilni font orezany na osu 400-600 (jine rezy web nepouziva) a podsazeny na
PLNY Latin + Latin Extended-A + Latin Extended-B + interpunkci, ne na znaky, ktere
web vykresluje dnes: ve chvili, kdy nekdo napise Ő nebo ș, by podsazeni na dnesni
obsah selhalo TISE, jako chybejici glyf. Jeden soubor misto dvou od Googlu.
font-display: swap - stejne chovani jako mely obe CDN, tedy zadna zmena FOIT/FOUT.
============================================================================ */
@font-face {
font-family: 'General Sans';
src: url('../fonts/GeneralSans-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'General Sans';
src: url('../fonts/GeneralSans-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'General Sans';
src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'General Sans';
src: url('../fonts/GeneralSans-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Geist Mono';
src: url('../fonts/GeistMono-latin-wght400-600.woff2') format('woff2');
font-weight: 400 600;
font-style: normal;
font-display: swap;
}
@layer tokens {
/* ---- from colors_and_type.css ---- */
/* ============================================================
engine2 - Design System foundations · "Obsidian" direction
Source of truth: home-v1.html (Claude Code, Obsidian palette)
Dark editorial / technical. General Sans + Geist Mono.
============================================================ */
/* Headlines use GENERAL SANS (Indian Type Foundry, served free + commercial-
use-OK via Fontshare) - a neutral geometric grotesque chosen as the closest
free stand-in for Neue Montreal. Weights 400/500/600/700 (no 800: General
Sans tops out at 700 Bold, so heading styles below use 700). */
/* Fonts: @font-face at the top of THIS file, served from /assets/fonts/. */
:root {
/* Rekne PROHLIZECI, v jakem motivu je - jinak nakresli posuvniky, textova pole
a vyber ve svem vlastnim, takze na tmavem webu svitil bily posuvnik. Tmava je
vychozi vzdy, bez ohledu na nastaveni systemu; svetla si to prepise nize. */
color-scheme: dark;
/* ---------- Font families ---------- */
/* General Sans = headings, UI, emphasis. Geist Mono = body copy + labels. */
--font-head: 'General Sans', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Body copy is set in MONO in this system - a deliberate signature. */
--font-body: var(--font-mono);
/* ---------- Obsidian neutrals (dark) ----------
Named after Obsidian's base ramp. */
--bg1: #1E1E1E; /* base-00 · main background */
--bg2: #242424; /* base-10 · alternate sections (.alt) */
--bg3: #2A2A2A; /* base-25 · cards / panels / hover */
--b: #363636; /* base-30 · borders, dividers, hairlines */
--m: #999999; /* base-60 · muted / secondary text */
--w: #DADADA; /* base-100 · primary text (not pure white) */
/* extra steps for finer control */
--bg4: #323232; /* raised hover */
--m2: #C2C2C2; /* brighter secondary */
--ink: #0A0A0A; /* near-black - text ON accent fills */
/* ---------- Accents ----------
Named by ROLE, not by colour, and that is not cosmetic. Fifty palettes redefine these
two, so in the "obloha" palette `--accent` holds #4297ce - blue. A token called `--mint`
holding blue is a token that lies to the next person who reads it, and the generator
already thought in roles internally (`a1`, `a2`); only the CSS names were literal.
The industry does this in two tiers: PRIMITIVE tokens name the colour (`green-500`) and
SEMANTIC tokens name the job (`accent`). This system has one tier, so that tier has to
be the semantic one - there is nowhere else for the meaning to live.
accent the action colour: links, buttons, numbers, the emphasised word in a headline
accent-2 the second highlight: sub-heads, step markers, the alternate statement */
--accent: #A8F0B8;
/* Indikator focusu je ROLE, ne barva - sleduje --accent, takze ho vsech padesat
palet dostane bez jedineho dalsiho radku a nemuze se s paletou rozejit. */
--focus: var(--accent);
--accent-dim: #7FD494; /* accent on hover / pressed */
--accent-2: #C4AAFF;
--accent-2-dim: #9270E0; /* accent-2 on hover / muted surfaces */
/* signature gradient - emphasis words in headlines only */
--grad: linear-gradient(135deg, var(--accent), var(--accent-2)); /* @kind color */
/* ---------- Borders ---------- */
--line: 1px solid var(--b);
--line-2: 1px solid #2E2E2E; /* @kind other */
/* ---------- Radii (small + sharp) ---------- */
--r-xs: 2px; /* inline logo "2" mark */
--r-sm: 3px; /* buttons */
--r-md: 4px; /* cards, CTAs */
--r-tag: 20px; /* mono tag chips (pill-ish, small) */
/* NOTE: no large 999px pill buttons in this direction. */
/* ---------- Layout ---------- */
--max: 1080px; /* content column width */
--gutter: 2rem; /* page side padding */
/* ---------- Content widths ----------
Five roles, not five sizes. Pick by what the element DOES; the number is this system's
business, not the page's. Before 2026-08-16 these were 19 hand-written values spread over
the pages, which is why the same kind of paragraph was 580px on one page and 660px on
another - nobody chose that, it accumulated.
A measure in `ch` follows the element's own font size, so it stays right when the type
scale changes; a measure in px does not. Use ch wherever the type is larger than body
copy. */
--head: 820px; /* display headings, pull quotes, intro statements */
--head-block: 20ch; /* headings that break by character count inside a block */
--read: 680px; /* running prose - the reading measure (~70 chars) */
--read-narrow: 440px; /* text beside something else: CTA copy next to a button,
a cell in a two-column grid */
--section-y: 6rem; /* vertical section rhythm */
--section-y-lg: 7.5rem; /* CTA / hero rhythm */
/* ---------- Type scale ----------
FOUR sizes, by role. The site had 54 distinct font-sizes and six different h2 sizes before
this existed; nobody decided that a band heading should be 2.4rem on one page, 2.5 on the
next, 2.7 on a third and 2.8 on a fourth. It accumulated, the same way the content widths
above did and for the same reason - a number is easy to type, a decision is not.
Each one is a clamp, so a heading scales with the window instead of jumping at a
breakpoint. That is not only smoother, it REMOVES RULES: the old stylesheet re-declared
`.hero h1` at 860px and again at 640px, and every page that overrode the size had to
remember to override both steps as well. Most did not, which is how one page's headline
still ran at 3.6rem on a 390px phone. A single declaration cannot forget its own
breakpoints.
Read the middle term as " at zero width, growing by % of the window"; the
clamp ends stop it at the sizes the design actually wants. */
--fs-display: clamp(2rem, 1.25rem + 3.5vw, 3.75rem); /* 32 -> 60px the h1 */
--fs-display-2: clamp(1.75rem, 1.125rem + 3vw, 3.25rem); /* 28 -> 52px display h2 */
--fs-section: clamp(1.625rem, 1.25rem + 1.75vw, 2.75rem);
/* Podlaha 1,625rem a ne 2rem, a zaklad 1,25rem a ne 1,625rem. Duvod je pocetni, ne
estericky: `section` driv startoval vys nez `display-2` a rostl pomaleji, takze se
ty dve krivky protinaly az na 640 px - a POD tou sirkou byl nadpis NIZSI urovne
VETSI nez ten nad nim (na 320 px section 32 px proti display-2 28 px). Ctenar na
telefonu tedy videl hierarchii obracene. Overeno na 33 sirkach od 320 do 1600 px:
0 krizeni. */ /* 32 -> 44px */
--fs-sub: clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem); /* 24 -> 30px */
--fs-card: clamp(1.0625rem, 0.9375rem + .4vw, 1.25rem);
/* Strop 1,25rem (20 px), ne 1,125rem. Pri zvednuti `lead` na 18 px mely oba kroky
STEJNOU hodnotu a odlisil je jen rez - to je presne to, co skala nema mit. Nadpis
karty je nadpis, tak dostal vlastni krok. */ /* 16 -> 18px */
--fs-micro: .75rem; /* 12px */
/* Body copy, four steps. Measured before this existed: 35 paragraphs across the site, 21
DIFFERENT class lists and six different line-heights. Not clamped - body text should not
grow with the window, it should stay at a comfortable size and let the MEASURE adapt. */
--fs-lead: 1.125rem; /* 18px the paragraph under a heading */
--fs-body: 1rem; /* 16px running prose - 15px byl kompromis kvuli */
/* sirkove dani mona (+32,5 %), ktera odesla */
--fs-small: .9375rem; /* 15px text beside something else, in a row or card */
--fs-tiny: .625rem; /* 10px labels, tags, the small print under a number */
/* Numbers shown large. TWO roles: a repeated value that DIFFERS is not automatically
drift - it is drift when the difference means nothing, and HIERARCHY when it tells the
reader which number matters. Collapsing five of these into one flattened the About
page's evidence panel from 80/32/32px to 71/71/71. */
--fs-number: clamp(2.625rem, 1.625rem + 3.5vw, 5rem); /* 42 -> 80px leads */
--fs-number-sm: clamp(1.625rem, 1.3125rem + 1vw, 2rem); /* 26 -> 32px supports */
/* The counter band, where the cell is a QUARTER of the row - so a clamp keyed to the
viewport sizes the number as if it had the whole page. Calibrated 2026-09-07 against the
widest number the site then carried ("10-20 %") so it stays on ONE line at every width
the gate walks. Below 481px the band is a single column, the cell is the full measure,
and the number goes back to --fs-number. */
--fs-number-band: clamp(2rem, .8rem + 3.2vw, 3.25rem); /* 32 -> 52px counter band */
/* ---------- Vertical rhythm ----------
Three bands, not twenty-six - which is how many distinct padding pairs the top-level
strips of the old site used between them. */
--band: clamp(3.5rem, 2.5rem + 2.6vw, 6rem); /* the ordinary section */
--band-lg: clamp(4rem, 2.6rem + 3.6vw, 7.5rem); /* hero and closing call */
--band-sm: clamp(2rem, 1.6rem + 1.2vw, 2.5rem); /* a strip that carries a rule */
/* Declared by the design system but NOT read by any rule. Kept deliberately - they are
design intent, and the site not using them is a fact about the pages, not about the
system. Do not treat their presence as evidence that anything depends on them.
RE-MEASURED 2026-08-17 by counting `var(--x)` across every .css, .php and .js in the
repo, because the 2026-08-15 list had gone stale in the direction that matters: it
named five tokens as unused that the pages have since started reading, so anyone
trusting it would have deleted live colours. The list below is the measurement, and it
is worth re-running rather than believing:
--font-body --line --line-2 --section-y --section-y-lg --shadow-card
--s-1 … --s-11 (the whole spacing scale)
Now READ, and no longer on this list: --r-xs, --bg4, --m2, --accent-dim,
--accent-2-dim, --shadow-pop.
TRAP, and the reason --line is worth naming twice: `--line` is a whole shorthand
(`1px solid var(--b)`), while the Tailwind utility `border-line` resolves through
`--color-line` to `var(--b)` - the COLOUR only. Two tokens one letter apart, one a
shorthand and one a colour, and `border: var(--color-line)` is the mistake they invite:
it is silently invalid, so the border simply does not appear. If the spacing scale and
these are ever adopted rather than deleted, rename one of the pair first. */
/* ---------- Spacing scale (rem, ~baseline of source) ---------- */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3.5rem;
--s-9: 5rem; --s-10: 6rem; --s-11: 7.5rem;
/* ---------- Elevation ----------
Mostly flat: depth comes from bg steps + hairline borders, not shadow. */
--shadow-card: 0 1px 0 rgba(0,0,0,0.25);
--shadow-pop: 0 12px 40px rgba(0,0,0,0.55);
/* ---------- Motion ---------- */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
--dur-fast: 150ms; /* @kind other */
--dur: 200ms; /* @kind other */
}
/* ---- from chrome.css ---- */
/* ---- LIGHT MODE token overrides (single canonical block) ---- */
:root[data-theme="light"] {
color-scheme: light;
--bg1: #FBFBF9;
--bg2: #F1F1ED;
--bg3: #EAEAE4;
--bg4: #E1E1DA;
--b: #DFDFD8;
--line-2: 1px solid #E8E8E1;
/* Light mode is where the contrast has to be earned: the surfaces are close together, so
a colour that clears AA on --bg1 can still fail on --bg4. Both of these were fitted
against the DARKEST surface (bg4), because that is the one a card sits on, and both were
failing before 2026-08-17: the accent ran 3.34-4.24 and the muted text 4.02-4.37, so
every mono link and every caption inside a card was below AA. Large numbers passed on
AA-large (3:1), which is why it looked fine.
Fitted, not eyeballed: hue and saturation are unchanged, only lightness moved, and the
stopping point is the first value where all four surfaces clear 4.5. */
--m: #64645F; /* 5.74 / 5.25 / 4.93 / 4.53 on bg / bg2 / bg3 / bg4 */
--m2: #46463F;
--w: #1A1A17;
--ink: #FBFBF9;
--accent: #0F7244; /* 5.77 / 5.28 / 4.95 / 4.55 */
--accent-dim: #0C5D37;
--accent-2: #6244CE; /* 6.26 / 5.73 / 5.37 / 4.94 - already clear */
--grad: linear-gradient(135deg, #0F7244, #6244CE);
--shadow-pop: 0 12px 40px rgba(20,20,18,0.16);
}
}