/* ===================================================================== Compliro · Design Tokens — Calm Intelligence (2026-05-13) Drop-in z compliro-redesign/new-tokens.css. USER OVERRIDE: ponechán Segoe UI font (NE Inter Tight) — žádná Google Fonts dependency. --font-family + --font-family-mono níže používá systémové fonty místo originálních z compliro-redesign. - Zpětně kompatibilní: zachovává všechny --color-* proměnné, mění pouze HODNOTY. Existující CSS pravidla budou fungovat dál jen v nové paletě. - Dark mode: data-theme="dark" na . ===================================================================== */ :root { /* ===== BRAND (NEW) =================================================== */ --color-ink: #0F1626; /* půlnoční — hlavní brand */ --color-ink-soft: #1A2438; --color-teal: #2BA39B; /* akcent — z brandu (Shield 3A) */ --color-teal-hover: #1F7C76; --color-teal-soft: #D7EEEC; /* světlé pozadí pro info */ /* ===== LEGACY ALIASES — držíme původní názvy s novými hodnotami ===== */ --color-primary: var(--color-ink); /* topbar, nadpisy */ --color-primary-hover: var(--color-ink-soft); --color-primary-bg: #ECE8DF; /* warm paper alt */ --color-accent: var(--color-teal); /* CTA, focus, links */ --color-accent-hover: var(--color-teal-hover); --color-accent-bg: var(--color-teal-soft); /* ===== STATUS (jemnější, méně cukrové) ============================== */ --color-success: #2A8F5C; --color-success-bg: #DBEFE2; --color-success-text: #1F6F46; --color-warning: #C4882C; --color-warning-bg: #F4E6C8; --color-warning-text: #8A5F1A; --color-error: #B83A3A; --color-error-bg: #F1D8D8; --color-error-text: #8C2828; --color-info: var(--color-teal); --color-info-bg: var(--color-teal-soft); --color-info-text: var(--color-teal-hover); /* ===== SURFACE & TEXT (warm paper namísto cool gray) ================ */ --color-bg: #F6F4EF; /* page background */ --color-bg-alt: #ECE8DF; /* sekundární pozadí, sidebar inactive, hover */ --color-surface: #FFFFFF; /* karty, modaly */ --color-surface-muted: #FAF8F4; /* lehce tonovaný surface */ --color-border: #E4DFD3; /* default — warm */ --color-border-strong: #CFC9BB; --color-text: #1E2638; /* primární text */ --color-text-secondary:#5A6478; /* popisky, meta */ --color-text-muted: #8893A6; /* placeholdery, disabled */ --color-text-inverse: #FFFFFF; /* ===== TYPOGRAPHY (USER OVERRIDE — systémové fonty, žádná CDN) ====== */ --font-family: 'Segoe UI', system-ui, -apple-system, Tahoma, Geneva, Verdana, sans-serif; --font-family-mono: 'Consolas', 'Monaco', 'Courier New', monospace; /* sizes */ --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 22px; --font-size-3xl: 28px; --font-size-display: 40px; /* line heights */ --line-height-tight: 1.25; --line-height-normal: 1.55; --line-height-loose: 1.75; /* weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold:600; --font-weight-bold: 700; /* tracking (letter-spacing) */ --tracking-tight: -0.02em; --tracking-tighter: -0.04em; /* velké nadpisy */ --tracking-wide: 0.04em; /* mono labels */ --tracking-mono: 0.4px; /* ===== SPACING (8px grid) =========================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ===== RADIUS ======================================================= */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 14px; /* karty — zvětšeno z 12px */ --radius-xl: 18px; --radius-full: 9999px; /* ===== SHADOWS (vrstvené) =========================================== */ --shadow-none: none; --shadow-sm: 0 1px 0 rgba(15,22,38,0.04), 0 1px 2px rgba(15,22,38,0.04); --shadow-md: 0 1px 0 rgba(15,22,38,0.04), 0 6px 18px rgba(15,22,38,0.08); --shadow-lg: 0 1px 0 rgba(15,22,38,0.06), 0 12px 32px rgba(15,22,38,0.12); --shadow-modal: 0 1px 0 rgba(15,22,38,0.06), 0 24px 48px rgba(15,22,38,0.18); --shadow-focus: 0 0 0 3px rgba(43,163,155,0.18); --shadow-focus-error: 0 0 0 3px rgba(184,58,58,0.18); /* Bold-redesign aliases retained for backward compat with components.css */ --shadow-card: var(--shadow-sm); --shadow-card-hover: var(--shadow-md); --shadow-dropdown: var(--shadow-md); --shadow-toast: var(--shadow-md); /* ===== MOTION ======================================================= */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 400ms; /* legacy aliases used by previous tokens.css */ --transition-fast: var(--dur-fast) var(--ease-out); --transition-base: var(--dur-base) var(--ease-out); --transition-slow: var(--dur-slow) var(--ease-out); /* ===== Z-INDEX ====================================================== */ --z-content: 1; --z-sticky: 100; --z-sidebar: 500; --z-topbar: 9999; --z-dropdown: 10000; --z-modal: 10500; --z-toast: 11000; /* ===== APP LAYOUT =================================================== */ --topbar-height: 56px; --topbar-height-mobile: 80px; --sidebar-width: 280px; --container-max: 1280px; /* ===== GRID PATTERN (jemný šum v pozadí) ============================ */ --bg-grid-color: rgba(15,22,38,0.04); --bg-grid-size: 32px; /* ===== LEGACY brand-gradient aliases (Bold redesign) ================ Některé inline page styles používají --color-brand-1/2 + --gradient-cta pro icon halo + admin badges. Mapujeme na teal aby celá app pasovala. */ --color-brand-1: var(--color-teal); --color-brand-2: var(--color-teal-hover); --color-accent-emerald: var(--color-success); --color-accent-emerald-bg: var(--color-success-bg); /* CTA gradient: teal → slightly lighter teal so the gradient is visible on buttons/badges. Goes darker on the lower-right to keep the brand accent feel without departing from the Calm Intelligence palette. */ --gradient-cta: linear-gradient(135deg, #36C2B7 0%, #1F7C76 100%); --gradient-page-header: linear-gradient(180deg, var(--color-surface-muted) 0%, var(--color-surface) 100%); --gradient-blob: radial-gradient(circle, rgba(43,163,155,0.12) 0%, transparent 70%); } /* ===================================================================== DARK MODE — aktivace přes ===================================================================== */ [data-theme="dark"] { --color-ink: #F6F4EF; --color-ink-soft: #E6E8EF; --color-teal: #3DC1B6; --color-teal-hover: #80E0D7; --color-teal-soft: rgba(61,193,182,0.14); --color-primary: var(--color-ink); --color-primary-hover: var(--color-ink-soft); --color-primary-bg: #141C2D; --color-accent: var(--color-teal); --color-accent-hover: var(--color-teal-hover); --color-accent-bg: var(--color-teal-soft); --color-success: #4FC587; --color-success-bg: rgba(79,197,135,0.14); --color-success-text: #7FD7A6; --color-warning: #E6B158; --color-warning-bg: rgba(230,177,88,0.14); --color-warning-text: #F0C77F; --color-error: #E27B7B; --color-error-bg: rgba(226,123,123,0.14); --color-error-text: #EDA0A0; --color-info: var(--color-teal); --color-info-bg: var(--color-teal-soft); --color-info-text: var(--color-teal-hover); --color-bg: #0A0F1A; --color-bg-alt: #0F1626; --color-surface: #141C2D; --color-surface-muted: #0F1626; --color-border: #1F2A40; --color-border-strong: #2C3A55; --color-text: #E6E8EF; --color-text-secondary:#8993A8; --color-text-muted: #5A6478; --color-text-inverse: #0F1626; --shadow-sm: 0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 1px 0 rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.4); --shadow-lg: 0 1px 0 rgba(0,0,0,0.5), 0 16px 32px rgba(0,0,0,0.5); --shadow-modal: 0 1px 0 rgba(0,0,0,0.6), 0 28px 56px rgba(0,0,0,0.6); --shadow-focus: 0 0 0 3px rgba(61,193,182,0.25); --shadow-focus-error: 0 0 0 3px rgba(226,123,123,0.25); --bg-grid-color: rgba(246,244,239,0.04); } /* ===================================================================== BASE — aplikuje se globálně ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text); background: var(--color-bg); /* jemný grid pattern v pozadí — odstraňte tento blok, pokud nechcete */ background-image: linear-gradient(to right, var(--bg-grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--bg-grid-color) 1px, transparent 1px); background-size: var(--bg-grid-size) var(--bg-grid-size); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } /* Headings */ h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-ink); letter-spacing: var(--tracking-tight); font-weight: var(--font-weight-semibold); } h1 { font-size: var(--font-size-3xl); letter-spacing: var(--tracking-tighter); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); } /* Mono utility */ .mono, .text-mono { font-family: var(--font-family-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; font-size: var(--font-size-xs); color: var(--color-text-secondary); } /* Focus ring — globální */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } /* Selection */ ::selection { background: var(--color-teal-soft); color: var(--color-ink); } /* ===================================================================== STATUS BADGE COLOR VARIANTS — zachováno z předchozího tokens.css ===================================================================== */ .status-aktivni { background: var(--color-success-bg); color: var(--color-success-text); } .status-cekajici { background: var(--color-info-bg); color: var(--color-info-text); } .status-zruseno { background: var(--color-error-bg); color: var(--color-error-text); } .status-doruceno { background: var(--color-success-bg); color: var(--color-success-text); } .status-aktivni::before, .status-cekajici::before, .status-zruseno::before, .status-doruceno::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; } .status-aktivni::before { background: var(--color-success); } .status-cekajici::before { background: var(--color-info); } .status-zruseno::before { background: var(--color-error); } .status-doruceno::before { background: var(--color-success); } /* ===================================================================== ICON SPRITE SIZING (restored after Calm Intelligence replace, 2026-05-13) Pages use . Without these rules SVG renders at viewBox default (24×24 here) = huge. ===================================================================== */ .icon { display: inline-block; vertical-align: -3px; stroke: currentColor; fill: none; flex-shrink: 0; } .icon-sm { width: 14px; height: 14px; } .icon-md { width: 18px; height: 18px; } .icon-lg { width: 24px; height: 24px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================ V19 — License gating (trial expired banner + watermark) ============================================ */ #licenseBanner { position: sticky; top: 56px; /* under topbar (56px height) */ z-index: 9000; /* below topbar (9999) above content (1) */ background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%); border-bottom: 1px solid #f59e0b; padding: 12px 24px; display: flex; align-items: center; gap: 16px; font-size: 14px; color: #78350f; font-weight: 500; } #licenseBanner .banner-icon { font-size: 18px; color: #d97706; } #licenseBanner .banner-text { flex: 1; } #licenseBanner .btn { margin-left: auto; padding: 8px 16px; font-size: 13px; } /* Read-only mode — disabled buttons + hide danger zones */ .disabled-by-license { opacity: 0.45; cursor: not-allowed !important; pointer-events: auto; /* keep tooltip working */ } body.license-readonly .danger-zone { display: none; } /* Print watermark — TRIAL EXPIRED diagonal across page. :not(.onprem-deployment) → na on-prem instalaci se vodoznak NEZOBRAZÍ: expirovaná licence tam smí exportovat audit důkazy (compliance-safe read-only), takže je nesmíme brandovat jako neplatné. Třídu onprem-deployment přidává utils.js. */ @media print { body.license-readonly:not(.onprem-deployment)::before { content: "ZKUŠEBNÍ VERZE VYPRŠELA — NEPLATNÝ DOKUMENT"; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); font-size: 72px; font-weight: 800; color: rgba(220, 38, 38, 0.25); z-index: 9999; pointer-events: none; white-space: nowrap; } body.license-readonly .topbar, body.license-readonly #licenseBanner, body.license-readonly .btn { display: none !important; } }