/* ========================================================================== tokens.css — jediný zdroj hodnot pro celý prototyp -------------------------------------------------------------------------- Zrcadlí design-system/foundations/*.md. Každá hodnota má komentář s tím, odkud pochází. Nic tady nesmí být vymyšlené: když hodnota chybí v MD, nejdřív se doplní spec, potom token — nikdy naopak. Zdroje: design-system/foundations/colors.md (Mode: Light) design-system/foundations/typography.md (breakpoint S = mobile baseline) ========================================================================== */ /* -------------------------------------------------------------------------- FONTY typography.md → Family → style mapping: VŠECHNY textové styly používají Family Primary (Poppins). Family Tech (Roboto Mono) má jediného konzumenta — styl `Tech`. Barlow Condensed se nikde nepoužívá, proto se nenačítá. Váhy: 400 Regular, 500 Medium, 600 SemiBold, 700 Bold — jen ty, které reálně nějaký styl potřebuje (weight scale v MD má 100–900, ale zbytek žádný styl nekonzumuje, takže by to byl mrtvý přenos). -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto+Mono:wght@400&family=Barlow+Condensed:wght@600&family=Barlow+Semi+Condensed:wght@700&display=swap'); :root { /* ======================================================================== BARVY — colors.md → Tokens ======================================================================== */ --white: #FFFFFF; /* White */ --black: #000000; /* Black */ --highlight: #5100DC; /* Highlight / 500 */ --content: #151D86; /* Content / 800 */ --content-50: #151D8680; /* Content 50% / 800-50 */ --user-bcg: #FFF7E8; /* User bcg / 200 */ --user-bcg-dark: #FFEFD2; /* User bcg dark / 400 */ --user-outline: #FFE2AE; /* User outline / 600 */ --blue-light: #EEF8FF; /* Blue light / 100 */ --blue: #DFF3FF; /* Blue / 200 */ --blue-dark: #A4D9FD; /* Blue dark / 300 */ --disabled-light: #DFDFDF; /* Disabled light / 100 */ --disabled: #A9A9A9; /* Disabled / 300 */ --disabled-dark: #5E5E5E; /* Disabled dark / 600 */ /* colors.md → Status */ --positive: #A0DDB7; /* Positive / 500 */ --warning: #F7C353; /* Warning / 500 */ --negative: #FF7373; /* Negative / 500 */ /* ======================================================================== RADIUS — foundations/radius.md POZOR: tohle není potvrzená scale. Ve Figmě nejsou radiusy vytažené jako variables — hodnoty jsou naměřené z komponent. Proto neutrální číselná jména: `--radius-sm` by předstíralo řadu, která není potvrzená. ======================================================================== */ --radius-2: 2px; /* drag handle proužek */ --radius-4: 4px; /* tag */ --radius-7: 7px; /* čip +23 v avatar stacku — ano, 7, ne 8 */ --radius-8: 8px; /* badge "aktivní" */ --radius-12: 12px; /* Button, doctor avatar, notification card, case card */ --radius-16: 16px; /* avatar 64×64 */ --radius-32: 32px; /* Dr.Digital footer karta */ --radius-36: 36px; /* otevřený Doctor sheet, horní rohy */ --radius-full: 999px; /* kruh / stadium — badge, pill, status dot */ /* ======================================================================== SPACING — foundations/spacing.md Stejná výhrada jako u radiusu: naměřeno z komponent, ne token set. 8/16/20 vypadá jako řada po 4, ale 14 a 18 do ní nesedí — takže scale netvrdím a jména jsou číselná. ======================================================================== */ --space-4: 4px; /* padding tagu, padding čipu +23; gap detailního řádku */ --space-5: 5px; /* gap v datovém bloku case card */ --space-8: 8px; /* Button inline gap; padding message badge; gap karet */ --space-10: 10px; /* padding badge "aktivní"; gap ve filled elementu */ --space-12: 12px; /* gap mezi kartami vyřešených případů */ --space-14: 14px; /* Body2 paragraph spacing; gap ve footeru */ --space-15: 15px; /* spodní padding labelu vyplněné anamnézy */ --space-16: 16px; /* Button padding */ --space-18: 18px; /* gap mezi avatary v user selectoru */ --space-19: 19px; /* gap drag handle ↔ řada karet */ --space-20: 20px; /* padding Dr.Digital footeru, karet */ --space-21: 21px; /* gap wordmark blok ↔ buttony */ --space-25: 25px; /* gap nadpis sekce ↔ obsah */ --space-29: 29px; /* gap horní blok ↔ blok s buttony */ --space-32: 32px; /* horní padding labelu nevyplněné anamnézy */ --space-36: 36px; /* pravý padding řady karet */ --space-40: 40px; /* horizontální padding sheetu i anamnézy; trailing carouselu */ --space-54: 54px; /* gap mezi hlavními bloky sheetu */ --space-72: 72px; /* horní padding section headeru */ --space-80: 80px; /* gap v section headeru; horní padding bloku souhlasu */ --space-143: 143px; /* gap blok souhlasu ↔ wordmark */ --space-144: 144px; /* prostor nad blokem souhlasu (= 64 gap + 80 padding) */ --space-200: 200px; /* spodní padding sheetu (nepoužitý, viz components.css) */ /* ⚠️ JEDINÁ POJMENOVANÁ SPACING VARIABLE, kterou jsme ve Figmě našli. Všechny ostatní hodnoty výš jsou naměřené z komponent (spacing.md). Proto se tahle jmenuje podle zdroje (`messages`), ne podle velikosti — u ní jméno existuje, takže ho nemáme právo přepsat na `--space-64`. */ --messages: 64px; /* rozestup mezi bloky otázek anamnézy */ /* ======================================================================== ROZMĚRY OBRAZOVKY — organisms/user-selector.md 393×852 je skutečný rozměr frame v Application souboru (iPhone 14/15). typography.md → breakpoint S má referenční šířku 390px; 393 je přesné číslo ze zdroje, takže vyhrává. ======================================================================== */ --screen-width: 393px; --screen-height: 852px; /* ======================================================================== FONT FAMILIES — typography.md → Primitives → Font families Family Secondary tady SCHVÁLNĚ NENÍ. V docs je Barlow Condensed, ale Figma variable vrací Roboto Mono — nevyřešený rozpor (review-backlog #23). Žádný styl ji nepoužívá, takže ji nepotřebujeme; definovat ji teď by znamenalo zabetonovat jednu ze dvou sporných hodnot do kódu. ======================================================================== */ --font-primary: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-tech: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Barlow — datumy, časy, tagy. Nalezeno až v Bottom sheetu, viz typography.md → "Barlow — číselné a datumové styly". DVĚ různé rodiny: Condensed na datumy, Semi Condensed na tagy. Nejsou navázané na `Family Secondary` — ve Figmě jsou zadrátované. */ --font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-semi-condensed: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif; /* ======================================================================== WEIGHT SCALE — typography.md → Primitives → Weight scale Kompletní stupnice ze zdroje, i když prototyp konzumuje jen 400–700. ======================================================================== */ --weight-thin: 100; --weight-extralight: 200; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* ======================================================================== TYPOGRAFIE — dvouúrovňový model Úroveň 1: `--{style}-{prop}-s` = surová hodnota breakpointu S. Odpovídá pattern `--{style}-font-size-{bp}` z typography.md. Úroveň 2: `--{style}-{prop}` = to, co komponenty skutečně čtou. Teď ukazuje na -s. Až přijde desktop, přepíše se uvnitř media query a ŽÁDNÝ konzument se nemusí měnit. Breakpoint S je aktivní baseline — viz typography.md → "Breakpoint → viewport". M/L tiery se doplní, až budou mít definované rozsahy. ======================================================================== */ /* --- Headings: weight je napříč breakpointy stejný (700 / alt 500) ------ */ --h1-font-size-s: 40px; --h1-line-height-s: 48px; --h2-font-size-s: 36px; --h2-line-height-s: 44px; --h3-font-size-s: 28px; --h3-line-height-s: 36px; --h4-font-size-s: 22px; --h4-line-height-s: 30px; --h5-font-size-s: 20px; --h5-line-height-s: 26px; /* --- Perex + Body ------------------------------------------------------- */ --perex-font-size-s: 20px; --perex-line-height-s: 32px; --body1-font-size-s: 18px; --body1-line-height-s: 26px; --body2-font-size-s: 16px; --body2-line-height-s: 22px; --body3-font-size-s: 14px; --body3-line-height-s: 18px; --body4-font-size-s: 12px; --body4-line-height-s: 18px; /* --- Aktivní alias tier (mobile = S) ----------------------------------- */ --h1-font-size: var(--h1-font-size-s); --h1-line-height: var(--h1-line-height-s); --h2-font-size: var(--h2-font-size-s); --h2-line-height: var(--h2-line-height-s); --h3-font-size: var(--h3-font-size-s); --h3-line-height: var(--h3-line-height-s); --h4-font-size: var(--h4-font-size-s); --h4-line-height: var(--h4-line-height-s); --h5-font-size: var(--h5-font-size-s); --h5-line-height: var(--h5-line-height-s); --perex-font-size: var(--perex-font-size-s); --perex-line-height: var(--perex-line-height-s); --body1-font-size: var(--body1-font-size-s); --body1-line-height: var(--body1-line-height-s); --body2-font-size: var(--body2-font-size-s); --body2-line-height: var(--body2-line-height-s); --body3-font-size: var(--body3-font-size-s); --body3-line-height: var(--body3-line-height-s); --body4-font-size: var(--body4-font-size-s); --body4-line-height: var(--body4-line-height-s); /* --- Weights per style — typography.md → "Weight per style" ------------ Napříč S/M/L stejné, proto bez -{bp} tieru. `-alt` = varianta, kterou MD u H1–H5 nazývá "light" a u Perex/Body "highlight". Držím jeden neutrální suffix, protože jde o tu samou mechaniku (druhá váha téhož stylu) — a protože "light" je zavádějící: hodnota je 500/Medium, zatímco weight scale má vlastní Light = 300 (review-backlog #22). ---------------------------------------------------------------------- */ --h1-weight: var(--weight-bold); --h1-weight-alt: var(--weight-medium); --h2-weight: var(--weight-bold); --h2-weight-alt: var(--weight-medium); --h3-weight: var(--weight-bold); --h3-weight-alt: var(--weight-medium); --h4-weight: var(--weight-bold); --h4-weight-alt: var(--weight-medium); --h5-weight: var(--weight-bold); --h5-weight-alt: var(--weight-medium); --perex-weight: var(--weight-regular); --perex-weight-alt: var(--weight-semibold); --body1-weight: var(--weight-regular); --body1-weight-alt: var(--weight-semibold); --body2-weight: var(--weight-regular); --body2-weight-alt: var(--weight-semibold); --body3-weight: var(--weight-regular); --body3-weight-alt: var(--weight-semibold); --body4-weight: var(--weight-medium); --body4-weight-alt: var(--weight-semibold); /* --- Letter spacing: 0 u všech stylů, napříč všemi breakpointy --------- */ --letter-spacing: 0; /* --- Body2 paragraph spacing — typography.md → "Paragraph spacing" ----- Existuje jen pro Body2, žádný jiný styl ho nemá. Neověřeno, jestli se liší per breakpoint (review-backlog, poznámka u "Paragraph spacing") — bereme jako hodnotu pro S. ---------------------------------------------------------------------- */ --body2-paragraph-spacing: 14px; /* --- Tech style — typography.md → "Tech — samostatný styl" ------------- Bez breakpointových variant, jedna fixní sada. ---------------------------------------------------------------------- */ --tech-font-size: 24px; --tech-line-height: 36px; --tech-weight: var(--weight-regular); /* --- Message mobile — typography.md → "Message mobile" ------------------ Pojmenovaný styl ze zdroje, nalezený až na obrazovce anamnézy. NENÍ to Body1: ten má při stejných 18px line-height 26, ne 24. ⚠️ Odstavcová mezera: zdroj váže na tenhle text `Body2/paragraph spacing`, jehož export TADY uvádí 12px, zatímco specimen design systému má 14 (viz --body2-paragraph-spacing výš). Držím obě hodnoty odděleně, ať se ten rozpor nezamázne jedním číslem — findings.md → F47. ---------------------------------------------------------------------- */ --message-font-size: 18px; --message-line-height: 24px; --message-weight: var(--weight-regular); --message-paragraph-spacing: 12px; } /* ========================================================================== TYPOGRAFICKÉ UTILITY Aplikují celý styl jedním jménem, ať se v komponentách neopakuje trojice font-size / line-height / weight. Názvy 1:1 podle typography.md. ========================================================================== */ .t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-perex, .t-body1, .t-body2, .t-body3, .t-body4 { font-family: var(--font-primary); letter-spacing: var(--letter-spacing); margin: 0; } .t-h1 { font-size: var(--h1-font-size); line-height: var(--h1-line-height); font-weight: var(--h1-weight); } .t-h2 { font-size: var(--h2-font-size); line-height: var(--h2-line-height); font-weight: var(--h2-weight); } .t-h3 { font-size: var(--h3-font-size); line-height: var(--h3-line-height); font-weight: var(--h3-weight); } .t-h4 { font-size: var(--h4-font-size); line-height: var(--h4-line-height); font-weight: var(--h4-weight); } .t-h5 { font-size: var(--h5-font-size); line-height: var(--h5-line-height); font-weight: var(--h5-weight); } .t-perex { font-size: var(--perex-font-size); line-height: var(--perex-line-height); font-weight: var(--perex-weight); } .t-body1 { font-size: var(--body1-font-size); line-height: var(--body1-line-height); font-weight: var(--body1-weight); } .t-body2 { font-size: var(--body2-font-size); line-height: var(--body2-line-height); font-weight: var(--body2-weight); } .t-body3 { font-size: var(--body3-font-size); line-height: var(--body3-line-height); font-weight: var(--body3-weight); } .t-body4 { font-size: var(--body4-font-size); line-height: var(--body4-line-height); font-weight: var(--body4-weight); } /* Druhá váha téhož stylu — u H1–H5 to MD nazývá "light", u Perex/Body "highlight". Modifikátor mění POUZE váhu, nic jiného. */ .t-h1--alt { font-weight: var(--h1-weight-alt); } .t-h2--alt { font-weight: var(--h2-weight-alt); } .t-h3--alt { font-weight: var(--h3-weight-alt); } .t-h4--alt { font-weight: var(--h4-weight-alt); } .t-h5--alt { font-weight: var(--h5-weight-alt); } .t-perex--alt { font-weight: var(--perex-weight-alt); } .t-body1--alt { font-weight: var(--body1-weight-alt); } .t-body2--alt { font-weight: var(--body2-weight-alt); } .t-body3--alt { font-weight: var(--body3-weight-alt); } .t-body4--alt { font-weight: var(--body4-weight-alt); } /* Body2 je jediný styl s paragraph spacing — platí mezi sousedními odstavci. */ .t-body2 + .t-body2 { margin-top: var(--body2-paragraph-spacing); } /* ========================================================================== BARLOW — číselné a datumové utility typography.md → "Barlow — číselné a datumové styly" Jmenují se podle velikosti, ne semanticky ("t-date-lg"), protože zdroj pro ně nemá pojmenované styly — jsou to naměřené hodnoty z jednoho sheetu. Semantické jméno by předstíralo systém, který neexistuje. `lnum` + `tnum` = lining + tabular číslice. U datumů v seznamu je tabular funkční požadavek, ne dekorace — bez něj se čísla pod sebou rozjezdí. Letter-spacing je ve zdroji 4 % font size, ALE jen do 17px. U 21px a 24px žádný tracking uvedený není, takže ho tam nedopočítávám — reprodukuju zdroj, viz typography.md → Otevřené otázky. ========================================================================== */ .t-num-11, .t-num-14, .t-num-17, .t-num-21, .t-num-24 { font-family: var(--font-condensed); font-weight: var(--weight-semibold); line-height: normal; /* zdroj nemá explicitní hodnotu */ font-feature-settings: 'lnum' 1, 'tnum' 1; margin: 0; } .t-num-11 { font-size: 11px; letter-spacing: 0.44px; } .t-num-14 { font-size: 14px; letter-spacing: 0.56px; } .t-num-17 { font-size: 17px; letter-spacing: 0.68px; } .t-num-21 { font-size: 21px; } /* bez trackingu — tak to má zdroj */ .t-num-24 { font-size: 24px; } /* bez trackingu — tak to má zdroj */ /* Tag používá druhou Barlow rodinu a Bold. Jediný výskyt Semi Condensed. */ .t-tag { font-family: var(--font-semi-condensed); font-weight: var(--weight-bold); font-size: 11px; letter-spacing: 0.44px; line-height: normal; text-transform: uppercase; font-feature-settings: 'lnum' 1, 'tnum' 1; margin: 0; } /* Message mobile — konverzační text. Odstavcová mezera platí MEZI odstavci, proto sousedský selektor, ne margin na každém. */ .t-message { font-family: var(--font-primary); font-size: var(--message-font-size); line-height: var(--message-line-height); font-weight: var(--message-weight); letter-spacing: var(--letter-spacing); margin: 0; } .t-message + .t-message { margin-top: var(--message-paragraph-spacing); } /* ⚠️ TRIM PATŘÍ NA BLOK, NE NA ODSTAVEC. `text-box-trim` odřízne box na cap-height nahoře a na účaří dole. Diakritika (á, ě, ů) sedí NAD cap-height a descendery (p, j, ž) POD účařím, takže trimnutý box je menší než skutečný rozsah glyfů. Dva sousedící trimnuté odstavce s `margin: 0` proto do sebe nalezou — háčky druhého odstavce překryjí ocásky prvního. Nahlásil David 2026-07-27 na právním textu. Zdroj to má správně: je to JEDEN textový node s víc odstavci, trimnutý jednou zvenčí. Uvnitř bloku se řádky rozestupují normálním line-heightem. Proto je trim utilita pro KONTEJNER textu. Vysvětlení, proč trim vůbec potřebujeme, je v components.css → TEXT-BOX TRIM. */ @supports (text-box: trim-both cap alphabetic) { .t-trim-block { text-box: trim-both cap alphabetic; } } .t-tech { font-family: var(--font-tech); font-size: var(--tech-font-size); line-height: var(--tech-line-height); font-weight: var(--tech-weight); letter-spacing: var(--letter-spacing); margin: 0; }