/* * Tokeny, których theme.json nie wyraża. * * 1. Fonty zastępcze z przeskalowanymi metrykami (makieta: _fonts.scss). * `fontFace` w theme.json przyjmuje tylko pliki, a te kroje to `local()`. * Zamiana kroju po wczytaniu (`font-display: swap`) nie przesuwa wtedy * układu. Zakres znaków równy zakresom fontu, więc strzałki i chevrony * spoza nich idą do kroju systemowego, jak w makiecie. * 2. Tryb wysokiego kontrastu z panelu ułatwień dostępu (makieta: tokens.scss, * `:root[data-contrast="high"]`): te same zmienne palety, inne wartości. * Sekcje biorą kolory wyłącznie z palety, więc tryb obejmuje całą stronę. * 3. Rozmiar pisma z panelu: skala korzenia (cały motyw jest w rem). */ @font-face { font-family: "Source Sans 3 Fallback"; src: local("Arial"); size-adjust: 94.5248%; ascent-override: 108.3313%; descent-override: 42.3169%; line-gap-override: 0%; 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, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Source Serif 4 Fallback"; src: local("Georgia"); size-adjust: 103.9974%; ascent-override: 99.6178%; descent-override: 32.2123%; line-gap-override: 0%; 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, U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; } /* * Aliasy o nazwach tokenów makiety (DESIGN-SYSTEM, tokens.scss). Każdy * wskazuje preset albo zmienną `--wp--custom--*` z theme.json, więc wartość * żyje w jednym miejscu. Arkusze bloków motywu przenoszą reguły makiety bez * tłumaczenia nazw. Tryb kontrastu przedefiniowuje presety niżej na tym samym * elemencie, więc aliasy biorą jego wartości. */ :root { --c-primary: var(--wp--preset--color--primary); --c-primary-hover: var(--wp--preset--color--primary-hover); --c-primary-deep: var(--wp--preset--color--primary-deep); --c-accent: var(--wp--preset--color--accent); --c-ink: var(--wp--preset--color--ink); --c-text: var(--wp--preset--color--text); --c-text-soft: var(--wp--preset--color--text-soft); --c-text-muted: var(--wp--preset--color--text-muted); --c-surface: var(--wp--preset--color--surface); --c-tint: var(--wp--preset--color--tint); --c-tint-strong: var(--wp--preset--color--tint-strong); --c-tint-card: var(--wp--preset--color--tint-card); --c-tint-row: var(--wp--preset--color--tint-row); --c-border: var(--wp--preset--color--border); --c-border-soft: var(--wp--preset--color--border-soft); --c-border-sep: var(--wp--preset--color--border-sep); --c-dark: var(--wp--preset--color--dark); --c-dark-text: var(--wp--preset--color--dark-text); --c-dark-text-strong: var(--wp--preset--color--dark-text-strong); --c-dark-text-muted: var(--wp--preset--color--dark-text-muted); --c-dark-heading: var(--wp--preset--color--dark-heading); --c-dark-line: var(--wp--preset--color--dark-line); --c-on-dark: var(--wp--preset--color--on-dark); --c-focus: var(--wp--preset--color--primary-hover); --c-dark-focus: var(--wp--preset--color--dark-line); --c-dark-rgb: var(--wp--custom--rgb--ciemny); --c-dark-heading-rgb: var(--wp--custom--rgb--ciemny-naglowek); --c-shadow-rgb: var(--wp--custom--rgb--cien); --c-surface-rgb: var(--wp--custom--rgb--powierzchnia); --font-sans: var(--wp--preset--font-family--sans); --font-serif: var(--wp--preset--font-family--serif); --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --text-1: var(--wp--preset--font-size--t-1); --text-2: var(--wp--custom--pismo--t-2); --text-3: var(--wp--preset--font-size--t-3); --text-4: var(--wp--preset--font-size--t-4); --text-5: var(--wp--preset--font-size--t-5); --text-6: var(--wp--preset--font-size--t-6); --text-7: var(--wp--preset--font-size--t-7); --text-8: var(--wp--preset--font-size--t-8); --text-9: var(--wp--custom--pismo--t-9); --text-10: var(--wp--preset--font-size--t-10); --text-11: var(--wp--custom--pismo--t-11); --text-h3: var(--wp--preset--font-size--h-3); --text-h3-alt: var(--wp--custom--pismo--h-3-alt); --text-h3-lg: var(--wp--custom--pismo--h-3-lg); --text-h2-sm: var(--wp--preset--font-size--h-2-sm); --text-h2: var(--wp--preset--font-size--h-2); --text-display-sm: var(--wp--custom--pismo--display-sm); --text-display: var(--wp--preset--font-size--display); --text-h1: var(--wp--preset--font-size--h-1); --space-1: var(--wp--custom--odstep--s-1); --space-2: var(--wp--preset--spacing--s-2); --space-3: var(--wp--custom--odstep--s-3); --space-4: var(--wp--custom--odstep--s-4); --space-5: var(--wp--preset--spacing--s-5); --space-6: var(--wp--preset--spacing--s-6); --space-7: var(--wp--preset--spacing--s-7); --space-8: var(--wp--custom--odstep--s-8); --space-9: var(--wp--preset--spacing--s-9); --space-10: var(--wp--custom--odstep--s-10); --space-11: var(--wp--preset--spacing--s-11); --space-12: var(--wp--custom--odstep--s-12); --space-13: var(--wp--preset--spacing--s-13); --space-14: var(--wp--custom--odstep--s-14); --space-15: var(--wp--custom--odstep--s-15); --space-16: var(--wp--preset--spacing--s-16); --space-17: var(--wp--preset--spacing--s-17); --space-18: var(--wp--preset--spacing--s-18); --space-19: var(--wp--preset--spacing--s-19); --space-20: var(--wp--custom--odstep--s-20); --space-21: var(--wp--custom--odstep--s-21); --space-22: var(--wp--custom--odstep--s-22); --space-f1: var(--wp--custom--odstep--f-1); --space-f2: var(--wp--custom--odstep--f-2); --space-f3: var(--wp--preset--spacing--f-3); --space-f4: var(--wp--preset--spacing--f-4); --space-f5: var(--wp--custom--odstep--f-5); --space-f6: var(--wp--preset--spacing--f-6); --space-f7: var(--wp--preset--spacing--f-7); --space-f8: var(--wp--custom--odstep--f-8); --space-f9: var(--wp--custom--odstep--f-9); --space-f10: var(--wp--custom--odstep--f-10); --space-f11: var(--wp--custom--odstep--f-11); --space-f12: var(--wp--custom--odstep--f-12); --space-f13: var(--wp--custom--odstep--f-13); --radius-1: var(--wp--custom--promien--r-1); --radius-2: var(--wp--custom--promien--r-2); --radius-3: var(--wp--preset--border-radius--r-3); --radius-4: var(--wp--custom--promien--r-4); --radius-5: var(--wp--preset--border-radius--r-5); --radius-6: var(--wp--custom--promien--r-6); --radius-7: var(--wp--preset--border-radius--r-7); --radius-8: var(--wp--custom--promien--r-8); --radius-9: var(--wp--preset--border-radius--r-9); --radius-pill: var(--wp--preset--border-radius--pill); --radius-circle: 50%; --shadow-card: var(--wp--preset--shadow--karta); --shadow-hover: var(--wp--preset--shadow--najechanie); --shadow-panel: var(--wp--preset--shadow--panel); --shadow-mega: var(--wp--preset--shadow--menu); --container: var(--wp--style--global--wide-size, 100rem); --pad-x: var(--wp--preset--spacing--wciecie); --target-min: var(--wp--custom--cel); --ease-out-soft: var(--wp--custom--ruch--krzywa); --duration-fast: var(--wp--custom--ruch--szybko); --duration-base: var(--wp--custom--ruch--srednio); --duration-slow: var(--wp--custom--ruch--wolno); --duration-slide: var(--wp--custom--ruch--slajd); --header-offset: 4.5rem; } @media (min-width: 768px) { :root { --header-offset: 6rem; } } /* Żółty na czarnym, jak strony urzędów: pary 21:1 i 19,6:1 (makieta, DESIGN-SYSTEM §1.2). */ :root[data-contrast="high"] { color-scheme: dark; --wp--preset--color--primary: #ff0; --wp--preset--color--primary-hover: #fff; --wp--preset--color--primary-deep: #ff0; --wp--preset--color--accent: #ff0; --wp--preset--color--ink: #fff; --wp--preset--color--text: #fff; --wp--preset--color--text-soft: #fff; --wp--preset--color--text-muted: #fff; --wp--preset--color--surface: #000; --wp--preset--color--tint: #000; --wp--preset--color--tint-strong: #000; --wp--preset--color--tint-card: #000; --wp--preset--color--tint-row: #000; --wp--preset--color--border: #fff; --wp--preset--color--border-soft: #fff; --wp--preset--color--border-sep: #fff; --wp--preset--color--dark: #000; --wp--preset--color--dark-text: #fff; --wp--preset--color--dark-text-strong: #fff; --wp--preset--color--dark-text-muted: #fff; --wp--preset--color--dark-heading: #ff0; --wp--preset--color--dark-line: #ff0; --wp--preset--color--on-dark: #fff; --wp--custom--rgb--ciemny: 0 0 0; --wp--custom--rgb--ciemny-naglowek: 255 255 0; --wp--custom--rgb--cien: 0 0 0; } :root[data-font-size="lg"] { font-size: 112.5%; } :root[data-font-size="xl"] { font-size: 125%; }