/* GENERATED by tools/build_design.py from design/hs/tokens.css + design/id-aliases.css. Edit design/ and rebuild; never edit this copy. */ /* ============================================================================ REDIMO_HS DESIGN TOKENS Vychadza z UKS (uks.redimo.sk) production tokens + adaptacie pre cielovku 40-70 r. (body 17px, tap 48px, focus 3px) + 3-mode theme system (light default + dark + hc) Vid _audit/04_kostra_riesenia/01_brand_extraction.md sekcia "Doporucene tokens" ============================================================================ */ /* === BASE TOKENS (theme-agnostic) === */ :root { /* Typography */ --rd-font-sans: "Inter Variable", "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Noto Sans", Arial, sans-serif; --rd-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; --rd-font-display: "Manrope Variable", "Manrope", "Inter Variable", "Inter", system-ui, sans-serif; --rd-weight-regular: 400; --rd-weight-medium: 500; --rd-weight-semibold: 600; --rd-weight-bold: 700; --rd-weight-black: 800; /* Type scale (HS adapted: body 17px pre cielovku 40-70 r.) */ --rd-display-size: 40px; --rd-display-lh: 48px; --rd-h1-size: 32px; --rd-h1-lh: 40px; --rd-h2-size: 24px; --rd-h2-lh: 32px; --rd-h3-size: 20px; --rd-h3-lh: 28px; --rd-body-lg-size: 19px; --rd-body-lg-lh: 30px; --rd-body-size: 17px; --rd-body-lh: 28px; --rd-body-sm-size: 15px; --rd-body-sm-lh: 24px; --rd-caption-size: 13px; --rd-caption-lh: 18px; --rd-overline-size: 12px; --rd-overline-lh: 16px; /* Spacing (UKS 1:1, 4px baseline) */ --rd-space-xs: 4px; --rd-space-sm: 8px; --rd-space-md: 16px; --rd-space-lg: 24px; --rd-space-xl: 32px; --rd-space-xxl: 48px; --rd-space-xxxl: 64px; /* Radius (UKS 1:1 + xs pre male prvky) * Pravidlo konzistencie 2026-04-27: VSETKY UI prvky pouzivaju zaoblene * stvorce/obdlzniky, ZIADNE kruhy ani pills. Mensie prvky => mensi radius. * xs (6px) - flagy, badges, chip ikony * sm (8px) - male tagy, statusove badges * md (12px) - tlacidla, triggery, icon buttons (40-56px) * lg (16px) - karty, panely * xl (24px) - hero karty, modaly * --rd-radius-pill je deprecated (zachovany len pre backward compat audit). */ --rd-radius-xs: 6px; --rd-radius-sm: 8px; --rd-radius-md: 12px; --rd-radius-lg: 16px; --rd-radius-xl: 24px; --rd-radius-pill: 999px; /* Elevation (Material/Carbon-style 4-tier) */ --rd-elevation-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --rd-elevation-md: 0 4px 12px rgba(0, 0, 0, 0.08); --rd-elevation-lg: 0 12px 28px rgba(0, 0, 0, 0.12); --rd-elevation-xl: 0 20px 40px rgba(0, 0, 0, 0.14); /* Motion */ --rd-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --rd-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1); --rd-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* Containers */ --rd-container-prose: 720px; --rd-container-narrow: 1120px; --rd-container-wide: 1280px; /* Component tokens (HS-specific overrides oproti UKS) */ --rd-button-min-height: 48px; --rd-button-lg-min-height: 56px; --rd-input-min-height: 56px; --rd-focus-ring-width: 3px; --rd-focus-ring-offset: 2px; --rd-tap-target-min: 48px; /* Brand gradient — single source of truth pre VSETKY primary CTA + active * indikatory. Pouziva grad-tl/mid/br tokeny ktore su theme-aware (light/dark/hc), * takze toto auto-prepne s temou. * Uzivatelska direktiva 2026-04-29: "vsade kde aktualne pouzivas zelenu * pouzij farebnu paletu s prechodom zelena/modra/fialova". */ --rd-gradient-brand: linear-gradient( to bottom right, var(--rd-grad-tl) 0%, var(--rd-grad-mid) 50%, var(--rd-grad-br) 100% ); /* Decorative gradients (legacy, used iba pre HeroBlock bg-blob — silne blurnute, * vizualne nezavisle na brand farbach). NOT pre primary CTA — pre to existuje * --rd-gradient-brand vyssie ktore je theme-aware. */ --rd-gradient-brand-blue-violet: linear-gradient(90deg, #2e7dba, #5b3ec7); --rd-gradient-warning-danger: linear-gradient(90deg, #f59e0b, #ef4444); } /* ============================================================================ === BRAND DIAGONAL GRADIENT TOKENS (zelena -> modra -> fialova) === 3-stop diagonal gradient sledujuci skutocnu uhlopriecku elementu (cez `linear-gradient(to bottom right, ...)` keyword spec). NIE 45deg - keyword `to bottom right` v CSS spec znamena gradient line ide z lavej-hornej rohu do pravej-dolnej rohu, takze pre rectangle 1200x630 angle = atan2(630, 1200) ~ 27.7deg, NIE 45deg. Spec: "the gradient line passes through the center and along the line that goes from the corner of the box that is in the same direction as the keyword to the opposite corner". ============================================================================ */ /* === LIGHT THEME (default, FB-style #f0f2f5) === */ :root, [data-theme="light"] { --rd-background: #f0f2f5; --rd-surface: #ffffff; --rd-surface-muted: #f0f2f5; --rd-surface-elevated: #ffffff; --rd-text: #1c1e21; /* AAA 14.90:1 vs bg, 16.71:1 vs surface */ /* Uzivatelska revizia 2026-04-29: text-muted bumped na AAA pre 40-70r cielovku * (presbyopia + vyblednute LCD). Lead/descriptions byvali borderline AA. */ --rd-text-muted: #4d5054; /* AAA 7.10:1 vs bg (predtym #65676b = AA 5.05) */ --rd-text-subtle: #5f6166; /* AA strong 5.67:1 vs bg (predtym DARKER nez muted = wrong hierarchy) */ --rd-border: #787c84; /* UI 3.73:1 vs bg (oprava z #dadde1 = 1.22 FAIL) */ --rd-border-subtle: #c8ccd1; /* vizualne mensia separacia, non-load-bearing */ --rd-border-strong: #6b6f76; /* UI 4.50:1 vs bg (AA pre form fields) */ /* Uzivatelska revizia 2026-04-29 (v7): light theme paleta zosvetlena na 600-shade * (predtym 900) — bola vizualne ~2x tmavsia ako dark theme. Teraz oba motivy * pouzivaju podobne lum-shade, paleta vyzera vizualne konzistentne. Accent-text * zostava na emerald-700 pre AA citatelnost na svetlom bg (5.0:1). */ --rd-accent: #047857; /* emerald-700, AA 5.41 white-on, AA 5.0 vs light bg */ --rd-accent-strong: #065f46; /* emerald-800 (hover deeper) */ --rd-accent-text: #047857; /* emerald-700 pre text linky (AA 5.0 vs light bg) */ --rd-accent-light: #d1fae5; /* emerald-100, jemny tint pre zvyraznenie */ --rd-accent-muted: #a7f3d0; /* emerald-200 */ --rd-on-accent: #ffffff; --rd-success: #0a5d3a; /* AAA 7.28:1 vs bg (oprava z #047857 = 4.89 AA) */ --rd-success-light: #d1fae5; --rd-warning: #7c3a0a; /* AAA 7.68:1 vs bg (oprava z #92400e = 6.32 AA) */ --rd-warning-light: #fef3c7; --rd-danger: #a01515; /* AAA 7.06:1 vs bg (oprava z #b91c1c = 5.77 AA) */ --rd-danger-light: #fee2e2; --rd-info: #155490; /* AAA 7.14:1 vs bg (oprava z #1f6ba0 = 5.10 AA) */ --rd-info-light: #dbeafe; --rd-overlay: rgba(15, 23, 42, 0.4); /* === BRAND DIAGONAL GRADIENT (light - 600-shade pre vizualnu paritu s dark) === * Uzivatelska revizia 2026-04-29 (v7): predtym 900-shade light gradient bol ~2x tmavsi * ako dark theme 600-shade. Posun na 600-shade dosiahne luminance parity: * emerald-600 (#059669) - lum 0.226, AA 4.76 white-on-this * blue-600 (#2563eb) - lum 0.151, AA 5.22 white-on-this * violet-600 (#7c3aed) - lum 0.134, AA 5.71 white-on-this * Light theme avg lum 0.170, dark theme avg lum 0.161 — takmer identicke. */ --rd-grad-tl: #059669; /* emerald-600 - parity s dark theme */ --rd-grad-mid: #2563eb; /* blue-600 - parity s dark theme */ --rd-grad-br: #7c3aed; /* violet-600 - jemne svetlejsi ako dark (700) */ /* Variants per element role */ --rd-grad-success-tl: #0e9268; --rd-grad-success-br: #1a8f8c; --rd-grad-info-tl: #2e7dba; --rd-grad-info-br: #7256e8; --rd-grad-premium-tl: #7256e8; --rd-grad-premium-br: #c026d3; --rd-grad-warning-tl: #f59e0b; --rd-grad-warning-br: #ea580c; --rd-grad-danger-tl: #ef4444; --rd-grad-danger-br: #b91c1c; /* === 3D SHADOWS (multi-layer ambient + accent + inner highlight) === */ --rd-shadow-3d-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06), 0 1px 1px 0 rgba(15, 23, 42, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.08); --rd-shadow-3d-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.10); --rd-shadow-3d-lg: 0 10px 20px -3px rgba(15, 23, 42, 0.10), 0 4px 8px -2px rgba(15, 23, 42, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.14); --rd-shadow-3d-glow: 0 0 0 1px rgba(46, 125, 186, 0.20), 0 8px 24px -4px rgba(46, 125, 186, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.20); /* === GLASS MORPHISM === */ --rd-glass-bg: rgba(255, 255, 255, 0.65); --rd-glass-border: rgba(255, 255, 255, 0.18); --rd-glass-blur: 12px; /* Header/Footer "dymové sklo" — uzivatelska revizia 2026-04-29: v light teme * pridame jemny slate-blue-gray podklad ktory s backdrop-blur vytvori dymovy * efekt. Cez 12% slate-700 #334155 cez bg vytvara cool tinted glass. */ --rd-glass-smoke: rgba(51, 65, 85, 0.12); color-scheme: light; } /* === DARK THEME === */ [data-theme="dark"] { --rd-background: #0f1117; --rd-surface: #1a1d2e; --rd-surface-muted: #151823; --rd-surface-elevated: #22263a; --rd-text: #f4f6fb; /* AAA 17.45:1 vs bg */ --rd-text-muted: #a8acba; /* AAA 8.33:1 vs bg, 7.37:1 vs surface */ --rd-text-subtle: #b0b4c0; /* AAA 9.11:1 (oprava z #8c90a0 = 5.94 AA) */ --rd-border: rgba(255, 255, 255, 0.35); /* UI 3.19:1 vs bg (oprava z 0.08 = 1.22) */ --rd-border-subtle: rgba(255, 255, 255, 0.12); /* vizualna separacia, non-load-bearing */ --rd-border-strong: rgba(255, 255, 255, 0.50); /* UI 5.32:1 vs bg (form borders) */ /* Uzivatelska revizia 2026-04-29 (v6): este tmavsie pre vyssi white-text * kontrast na gradient buttonoch. Posun TL+accent na emerald-600 (#059669) * — AA 5.00 vs dark bg (citatelnost zachovana), AA 4.76 white-on-this. */ --rd-accent: #059669; /* emerald-600, AA 5.00:1 vs bg, 4.76:1 white-on-this */ --rd-accent-strong: #10b981; /* emerald-500 (hover light-up) */ --rd-accent-text: #059669; /* emerald-600 — exact match logo TL dark */ --rd-accent-light: rgba(5, 150, 105, 0.20); --rd-accent-muted: rgba(5, 150, 105, 0.35); --rd-on-accent: #ffffff; /* biely text na emerald-600 — 4.76 AA */ --rd-success: #34d399; /* AAA 9.82:1 */ --rd-success-light: rgba(52, 211, 153, 0.12); --rd-warning: #fbbf24; /* AAA 11.30:1 */ --rd-warning-light: rgba(251, 191, 36, 0.12); --rd-danger: #fca5a5; /* AAA 9.94:1 (oprava z #f87171 = 6.82 AA) */ --rd-danger-light: rgba(248, 113, 113, 0.12); --rd-info: #60a5fa; /* AAA 7.42:1 */ --rd-info-light: rgba(96, 165, 250, 0.12); --rd-overlay: rgba(0, 0, 0, 0.6); /* Dark elevations zvyrazneny shadow */ --rd-elevation-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --rd-elevation-md: 0 4px 12px rgba(0, 0, 0, 0.5); --rd-elevation-lg: 0 12px 28px rgba(0, 0, 0, 0.6); --rd-elevation-xl: 0 20px 40px rgba(0, 0, 0, 0.7); /* === BRAND DIAGONAL GRADIENT (dark - 600-shade pre vyssi white-text kontrast) === * Uzivatelska revizia 2026-04-29 (v6): "este zvysit kontrast pre biely text" — posun * 500→600 shade. White-on-color contrast skok 2.92→4.76 (AA passes vs FAIL). * Trade-off: TL/MID/BR vs dark bg klesa pod AA pre TEXT use case (3.6-5.0), ale gradient * sa pouziva primarne ako BUTTON BG (white text on top), nie ako gradient text (logo). * Pre text accent (--rd-accent-text) pouzivame TL ktore pasuje (AA 5.0). */ --rd-grad-tl: #059669; /* emerald-600 - hlboka zelená (AA 5.00 vs bg) */ --rd-grad-mid: #2563eb; /* blue-600 - hlboka modrá (white-on 5.22 AA) */ --rd-grad-br: #6d28d9; /* violet-700 - hlboka levanduľová (white-on 7.22 AAA) */ --rd-grad-success-tl: #34d399; --rd-grad-success-br: #5eead4; --rd-grad-info-tl: #60a5fa; --rd-grad-info-br: #a78bfa; --rd-grad-premium-tl: #a78bfa; --rd-grad-premium-br: #f0abfc; --rd-grad-warning-tl: #fbbf24; --rd-grad-warning-br: #fb923c; --rd-grad-danger-tl: #fca5a5; --rd-grad-danger-br: #f87171; /* === 3D SHADOWS (dark - hlbsi shadow, mensi inner highlight) === */ --rd-shadow-3d-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.40), 0 1px 1px 0 rgba(0, 0, 0, 0.20), inset 0 1px 0 0 rgba(255, 255, 255, 0.04); --rd-shadow-3d-md: 0 4px 8px -2px rgba(0, 0, 0, 0.50), 0 2px 4px -1px rgba(0, 0, 0, 0.30), inset 0 1px 0 0 rgba(255, 255, 255, 0.06); --rd-shadow-3d-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.55), 0 4px 8px -2px rgba(0, 0, 0, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.08); --rd-shadow-3d-glow: 0 0 0 1px rgba(96, 165, 250, 0.35), 0 8px 24px -4px rgba(96, 165, 250, 0.40), inset 0 1px 0 0 rgba(255, 255, 255, 0.10); --rd-glass-bg: rgba(15, 23, 42, 0.65); --rd-glass-border: rgba(255, 255, 255, 0.10); --rd-glass-blur: 12px; /* Dark theme: zachovame surface-based smoky sklo (uz je tmavé) */ --rd-glass-smoke: color-mix(in srgb, var(--rd-surface) 65%, transparent); color-scheme: dark; } /* === HC THEME (high-contrast pre cielovku 40-70 r. s presbyopiou) === */ [data-theme="hc"] { --rd-background: #000000; --rd-surface: #000000; --rd-surface-muted: #000000; --rd-surface-elevated: #0a0a0a; --rd-text: #ffffff; /* 21:1 AAA */ --rd-text-muted: #ffff00; /* yellow on black, 19.6:1 */ --rd-text-subtle: #ffffff; --rd-border: #ffffff; --rd-border-subtle: #cccccc; --rd-border-strong: #ffff00; --rd-accent: #00ff88; /* bright green, 13.7:1 */ --rd-accent-strong: #00ff88; --rd-accent-text: #00ff88; --rd-accent-light: #003322; --rd-accent-muted: #006644; --rd-on-accent: #000000; --rd-success: #00ff88; --rd-success-light: #003322; --rd-warning: #ffaa00; --rd-warning-light: #332200; --rd-danger: #ff5555; --rd-danger-light: #330000; --rd-info: #66ccff; --rd-info-light: #002244; --rd-overlay: rgba(0, 0, 0, 0.85); /* HC: 3 px borders namiesto shadows */ --rd-elevation-sm: 0 0 0 1px #ffffff; --rd-elevation-md: 0 0 0 2px #ffffff; --rd-elevation-lg: 0 0 0 3px #ffffff; --rd-elevation-xl: 0 0 0 3px #ffff00; /* === BRAND DIAGONAL GRADIENT (HC - pure brand farby, max kontrast) === */ --rd-grad-tl: #00ff88; /* pure green */ --rd-grad-mid: #00bbff; /* pure cyan-blue */ --rd-grad-br: #aa00ff; /* pure violet */ --rd-grad-success-tl: #00ff88; --rd-grad-success-br: #00ffcc; --rd-grad-info-tl: #00bbff; --rd-grad-info-br: #aa00ff; --rd-grad-premium-tl: #aa00ff; --rd-grad-premium-br: #ff00ff; --rd-grad-warning-tl: #ffaa00; --rd-grad-warning-br: #ff6600; --rd-grad-danger-tl: #ff5555; --rd-grad-danger-br: #ff0000; /* HC: shadows = solid borders pre vyssi kontrast */ --rd-shadow-3d-sm: 0 0 0 2px CanvasText; --rd-shadow-3d-md: 0 0 0 3px CanvasText; --rd-shadow-3d-lg: 0 0 0 4px CanvasText; --rd-shadow-3d-glow: 0 0 0 3px Highlight; --rd-glass-bg: Canvas; --rd-glass-border: CanvasText; --rd-glass-blur: 0px; /* HC: solid surface, no glass effect (kontrast > vizualny efekt) */ --rd-glass-smoke: Canvas; --rd-focus-ring-width: 4px; --rd-focus-ring-offset: 3px; color-scheme: dark; } /* === FORCED COLORS (Windows High Contrast Mode) === */ @media (forced-colors: active) { :root { --rd-background: Canvas; --rd-surface: Canvas; --rd-text: CanvasText; --rd-text-muted: GrayText; --rd-border: ButtonBorder; --rd-accent: LinkText; --rd-accent-strong: LinkText; --rd-on-accent: ButtonFace; } } /* === SYSTEM AUTO-DETECT (ak user nezvolil explicitnu temu) === */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --rd-background: #0f1117; --rd-surface: #1a1d2e; --rd-surface-muted: #151823; --rd-surface-elevated: #22263a; --rd-text: #f4f6fb; /* AAA 17.45:1 */ --rd-text-muted: #a8acba; /* AAA 8.33:1 */ --rd-text-subtle: #b0b4c0; /* AAA 9.11:1 (synced s [data-theme="dark"]) */ --rd-border: rgba(255, 255, 255, 0.35); /* UI 3.19:1 */ --rd-border-subtle: rgba(255, 255, 255, 0.12); --rd-border-strong: rgba(255, 255, 255, 0.50); /* UI 5.32:1 */ --rd-accent: #4ec698; --rd-accent-strong: #6fdbb0; --rd-on-accent: #0f1117; color-scheme: dark; } } @media (prefers-contrast: more) { :root:not([data-theme]) { --rd-text: #000000; --rd-text-muted: #000000; --rd-border: #000000; --rd-accent: #003322; } } /* Redimo ID aliases on top of the exact HS tokens (design/hs/tokens.css). * Names only: no HS value is overridden here. */ :root { --rd-header-background: var(--rd-glass-smoke); --rd-gradient-brand-display: var(--rd-gradient-brand); /* Content buttons with small white text. The HS brand gradient starts at * #059669, where white text reaches only 3.77:1; every stop of this darker * gradient clears 4.5:1. The shell keeps the exact HS gradient. */ --rd-gradient-action: linear-gradient(to bottom right, #0c7d58 0%, #167d7d 22%, #2670a8 52%, #6249d0 82%, #4e349e 100%); }