/* ============================================================ base.css — sdílený návrhový systém pro Attesta / Cadence / Maestro Struktura + komponenty. Barvy značky dodává brand-.css. Light i dark mode. Nezávislé na frameworku (čisté CSS proměnné). Přepínání dark: nebo systémové prefers-color-scheme. ============================================================ */ :root { /* --- Typografie --- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --fs-caption: 11px; --fs-footnote: 12px; --fs-small: 13px; --fs-body: 14px; --fs-lead: 16px; --fs-h3: 19px; --fs-h2: 22px; --fs-h1: 26px; --fw-regular: 400; --fw-medium: 500; /* jediné "tučné" – nikdy 600/700 */ --lh-body: 1.5; --lh-tight: 1.25; /* --- Rozestupy a rádiusy --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --radius-control: 6px; --radius: 8px; --radius-card: 12px; --radius-pill: 999px; /* --- Neutrální plochy (light) --- */ --surface-page: #F7F8FA; --surface-card: #FFFFFF; --surface-subtle: #F1F3F5; --text-primary: #1A1D21; --text-secondary: #5B6169; --text-muted: #8A9099; --border: rgba(20, 24, 32, 0.10); --border-strong: rgba(20, 24, 32, 0.18); /* --- Stavové barvy (light) – sdílené napříč aplikacemi --- */ --status-neutral-fg: #5B6169; --status-neutral-bg: #EEF0F2; --status-info-fg: #2563EB; --status-info-bg: #E7EFFC; --status-success-fg: #15803D; --status-success-bg: #E7F6EC; --status-warning-fg: #B45309; --status-warning-bg: #FBEFD9; --status-danger-fg: #DC2626; --status-danger-bg: #FCEBEB; /* --- Chrome hlavičky (vždy tmavá značka) --- */ --header-nav-muted: rgba(255, 255, 255, 0.62); --header-nav-active: #FFFFFF; --header-avatar-bg: rgba(255, 255, 255, 0.14); color-scheme: light; } :root[data-theme="dark"] { --surface-page: #0F1114; --surface-card: #16181D; --surface-subtle: #1E2127; --text-primary: #ECEEF1; --text-secondary: #A6ADB6; --text-muted: #6E7681; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --status-neutral-fg: #A6ADB6; --status-neutral-bg: rgba(255,255,255,0.07); --status-info-fg: #7FA9F0; --status-info-bg: rgba(37,99,235,0.18); --status-success-fg: #5DD08A; --status-success-bg: rgba(21,128,61,0.20); --status-warning-fg: #E3A857; --status-warning-bg: rgba(180,83,9,0.22); --status-danger-fg: #F08A8A; --status-danger-bg: rgba(220,38,38,0.20); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-page: #0F1114; --surface-card: #16181D; --surface-subtle: #1E2127; --text-primary: #ECEEF1; --text-secondary: #A6ADB6; --text-muted: #6E7681; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --status-neutral-fg: #A6ADB6; --status-neutral-bg: rgba(255,255,255,0.07); --status-info-fg: #7FA9F0; --status-info-bg: rgba(37,99,235,0.18); --status-success-fg: #5DD08A; --status-success-bg: rgba(21,128,61,0.20); --status-warning-fg: #E3A857; --status-warning-bg: rgba(180,83,9,0.22); --status-danger-fg: #F08A8A; --status-danger-bg: rgba(220,38,38,0.20); color-scheme: dark; } } /* ============================================================ Základ ============================================================ */ * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); background: var(--surface-page); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-weight: var(--fw-medium); line-height: var(--lh-tight); margin: 0; } /* ============================================================ Hlavička (tmavá značka v obou režimech) ============================================================ */ .app-accent-bar { height: 3px; background: var(--brand-fill); } .app-header { background: var(--brand-ink); padding: 0 var(--sp-5); height: 56px; display: flex; align-items: center; justify-content: space-between; } .app-brand { display: flex; align-items: center; gap: var(--sp-3); } .app-brand__mark { width: 28px; height: 28px; border-radius: 7px; background: var(--brand-fill); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-medium); font-size: 16px; } .app-brand__name { color: #FFFFFF; font-size: var(--fs-lead); font-weight: var(--fw-medium); } .app-nav { display: flex; align-items: center; gap: var(--sp-4); } .app-nav a { color: var(--header-nav-muted); font-size: var(--fs-footnote); padding-bottom: 2px; } .app-nav a:hover { color: var(--header-nav-active); } .app-nav a.is-active { color: var(--header-nav-active); border-bottom: 2px solid var(--brand-fill); } .app-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--header-avatar-bg); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: var(--fs-footnote); } /* ============================================================ Tlačítka ============================================================ */ .btn { font: inherit; font-size: var(--fs-footnote); font-weight: var(--fw-medium); padding: 7px 13px; border-radius: var(--radius-control); border: 0.5px solid var(--border-strong); background: transparent; color: var(--text-primary); cursor: pointer; transition: background .12s ease; } .btn:hover { background: var(--surface-subtle); } .btn-primary { background: var(--brand-fill); color: var(--on-brand); border-color: transparent; } .btn-primary:hover { background: var(--brand-fill-hover); } /* ============================================================ Obsahová plocha, nadpisy ============================================================ */ .app-main { padding: var(--sp-4) var(--sp-5); } .eyebrow { font-size: var(--fs-caption); letter-spacing: 1px; text-transform: uppercase; color: var(--brand-text); } .page-title { font-size: var(--fs-h2); margin-top: 2px; } /* ============================================================ Karty a metriky ============================================================ */ .card { background: var(--surface-card); border: 0.5px solid var(--border); border-radius: var(--radius-card); padding: var(--sp-4) var(--sp-4); } .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); } .metric { background: var(--surface-subtle); border-radius: var(--radius); padding: 12px 14px; } .metric--primary { border-left: 3px solid var(--brand-fill); } .metric__label { font-size: var(--fs-footnote); color: var(--text-secondary); } .metric__value { font-size: var(--fs-h2); font-weight: var(--fw-medium); } /* ============================================================ Tabulka ============================================================ */ .table { width: 100%; border: 0.5px solid var(--border); border-radius: var(--radius); overflow: hidden; border-collapse: collapse; } .table thead th { background: var(--surface-subtle); text-align: left; font-weight: var(--fw-regular); font-size: var(--fs-caption); color: var(--text-muted); padding: 8px 12px; } .table tbody td { padding: 9px 12px; font-size: var(--fs-footnote); border-top: 0.5px solid var(--border); } .table tbody a, .table .link { color: var(--brand-text); } .table tbody tr:hover td { background: var(--surface-subtle); } /* ============================================================ Štítky (stavy) – konzistentní napříč aplikacemi ============================================================ */ .badge { display: inline-flex; align-items: center; font-size: var(--fs-caption); font-weight: var(--fw-medium); padding: 2px 8px; border-radius: 5px; } .badge--neutral { color: var(--status-neutral-fg); background: var(--status-neutral-bg); } .badge--info { color: var(--status-info-fg); background: var(--status-info-bg); } .badge--success { color: var(--status-success-fg); background: var(--status-success-bg); } .badge--warning { color: var(--status-warning-fg); background: var(--status-warning-bg); } .badge--danger { color: var(--status-danger-fg); background: var(--status-danger-bg); } .badge--brand { color: var(--brand-text); background: var(--brand-tint); } /* Řádek requestu s barevným levým okrajem */ .request { border: 0.5px solid var(--border); border-left: 3px solid var(--brand-fill); border-radius: 0 var(--radius) var(--radius) 0; padding: 9px 11px; } .request--success { border-left-color: var(--status-success-fg); } .request--danger { border-left-color: var(--status-danger-fg); } .request__title { font-size: var(--fs-footnote); font-weight: var(--fw-medium); } /* Fokus (přístupnost) */ :focus-visible { outline: 2px solid var(--brand-fill); outline-offset: 2px; }