:root{ /* base */ --bg: #fafafa; --surface: #ffffff; --text: #111827; --muted: #6b7280; --border: #e5e7eb; --brand: #020202; --brand-contrast: #ffffff; --accent: #0ea5e9; --accent-contrast: #071018; --font: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji'; /* links */ --link: #2b3336; --link-hover: #0284c7; --underline-offset: 2px; /* shape & motion */ --radius: 12px; --btn-radius: 10px; --shadow: 0 10px 30px rgba(0,0,0,.08); --btn-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06); --tr-fast: 150ms; --tr-slow: 250ms; /* buttons: primary */ --btn-primary-bg: #004f4f; --btn-primary-text: #ffffff; --btn-primary-hover-bg: #036666; --btn-primary-active-bg: #024b4b; --btn-primary-disabled-bg: #9ca3af; /* buttons: secondary */ --btn-secondary-bg: #0ea5e9; --btn-secondary-text: #071018; --btn-secondary-hover-bg: #38bdf8; --btn-secondary-active-bg: #0891b2; /* buttons: outline */ --btn-outline-bg: transparent; --btn-outline-text: #111827; --btn-outline-border: #e5e7eb; --btn-outline-hover-bg: #f3f4f6; /* buttons: ghost */ --btn-ghost-bg: transparent; --btn-ghost-text: #111827; --btn-ghost-hover-bg: #f3f4f6; /* search */ --btn-search-bg: #f4c40f; --btn-search-text: #073f3e; /* flash bar */ --flash-bg: #020202; --flash-fg: #ffffff; /* A11Y defaults – používa ich app.js */ --a11y-font-scale: 1; --a11y-letter: 0; --a11y-filter: none; --a11y-media-filter: none; /* NAV tokeny + hint pre JS (detekciu tónu) */ --nav-bg: #fafafa; --nav-text: #000000; --nav-link: var(--text); --nav-link-hover: var(--link-hover); --nav-tone-hint: light; }/* === A11Y: cross-tenant overrides ================================= */ /* 1) HIGH CONTRAST: premapuj tokeny – odkazy ŽLTÉ všade */ html.a11y-contrast-high, body.a11y-contrast-high{ --bg:#000; --surface:#000; --text:#fff; --muted:#c7c7c7; --border:#666; --brand:#000; --brand-contrast:#fff; --accent:#ff0; --accent-contrast:#000; /* Odkazy žlté globálne (aj v NAV) */ --link:#ff0; --link-hover:#ff0; --nav-link: var(--link); --nav-link-hover: var(--link-hover); /* Tlačidlá viazané na tokeny */ --btn-primary-bg:var(--accent); --btn-primary-text:var(--accent-contrast); --btn-primary-hover-bg:var(--accent); --btn-primary-active-bg:var(--accent); --btn-secondary-bg:var(--accent); --btn-secondary-text:var(--accent-contrast); --btn-secondary-hover-bg:var(--accent); --btn-secondary-active-bg:var(--accent); --btn-outline-bg:transparent; --btn-outline-text:var(--text); --btn-outline-border:var(--border); --btn-outline-hover-bg:#111; --btn-ghost-bg:transparent; --btn-ghost-text:var(--text); --btn-ghost-hover-bg:#111; --icon-color: var(--text); --icon-stroke: 2px; --btn-search-bg:var(--accent); --btn-search-text:var(--accent-contrast); } /* 2) INVERT: globálny filter na , NAV odpoj a sprístupni. Default (keď JS ešte neurčil tón) = tmavá NAV pre istotu. */ html.a11y-invert .site-header, html.a11y-invert .mbar{ filter:none; background:#000; color:#fff; } html.a11y-invert .desk-nav a{ color:#fff; } html.a11y-invert .desk-nav a:hover{ color:#ff0; text-decoration:underline; text-underline-offset:3px; } html.a11y-invert .mbar .nav-toggle .bar, html.a11y-invert .mbar .icon svg, html.a11y-invert .desktop-only .icon svg{ stroke:#fff; background:#fff; } /* INVERT – pôvodne tmavá NAV -> v invert bude svetlá (iba mimo HC) */ html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="dark"] .site-header, html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="dark"] .mbar{ filter:none; background:#fff; color:#000; border-color:rgba(0,0,0,.2); } html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="dark"] .desk-nav a{ color:#000; } html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="dark"] .desk-nav a:hover{ color:#000; text-decoration:underline; text-underline-offset:3px; } html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="dark"] .mbar .nav-toggle .bar, html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="dark"] .mbar .icon svg, html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="dark"] .desktop-only .icon svg{ stroke:#000; background:#000; } /* INVERT – pôvodne svetlá NAV -> v invert bude tmavá (iba mimo HC) */ html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="light"] .site-header, html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="light"] .mbar{ filter:none; background:#000; color:#fff; } html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="light"] .desk-nav a{ color:#fff; } html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="light"] .desk-nav a:hover{ color:#ff0; text-decoration:underline; text-underline-offset:3px; } html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="light"] .mbar .nav-toggle .bar, html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="light"] .mbar .icon svg, html.a11y-invert:not(.a11y-contrast-high)[data-nav-tone="light"] .desktop-only .icon svg{ stroke:#fff; background:#fff; } /* HIGH CONTRAST – nech vždy vyhrá (zostáva čierna) */ html.a11y-contrast-high .site-header, html.a11y-contrast-high .mbar{ background:#000; color:#fff; } html.a11y-contrast-high .desk-nav a{ color:#ff0; } /* 3) HC: NAV vždy čitateľná (tmavý bar) */ html.a11y-contrast-high .site-header, html.a11y-contrast-high .mbar{ background:#000; color:#fff; } html.a11y-contrast-high .desk-nav a{ color:#ff0; } html.a11y-contrast-high .desk-nav a:hover{ color:#ff0; text-decoration:underline; text-underline-offset:3px; } html.a11y-contrast-high .mbar .nav-toggle .bar, html.a11y-contrast-high .mbar .icon svg, html.a11y-contrast-high .desktop-only .icon svg{ stroke:#fff; background:#fff; } /* 4) Nadpisy/ADMIN: v HC donúť text z tokenu (kvôli inlinu) */ html.a11y-contrast-high h1, html.a11y-contrast-high h2, html.a11y-contrast-high h3, html.a11y-contrast-high h4, html.a11y-contrast-high h5, html.a11y-contrast-high h6{ color:var(--text); }