/* =================================================================== KLOVO CONSOLE · VARIATION B · "LEDGER" Load AFTER klovo-tokens.css. Activates on: Dense, hairline, quiet. The accent is ink; colour exists ONLY to carry meaning. Pastel appears as a tinted row, a tinted tag, a tinted cell, never as decoration. Numerals are monospaced and right-aligned. Hover is a change of ground, not a movement. Same semantic hooks as the other variations. =================================================================== */ [data-klovo-theme="console"][data-k-var="ledger"] { --k-bg: #FFFFFF; --k-surface: #FFFFFF; --k-surface-2: #F5F4F0; --k-ink: #1B1A17; --k-ink-soft: #3D3A34; --k-dim: #6E6A61; --k-faint: #A39F95; --k-line: #DAD7CF; --k-line-soft: #ECEAE4; --k-accent: #1B1A17; /* ink is the accent */ --k-accent-deep: #3D3A34; --k-accent-glow: #E4E2DC; --k-on-accent: #FFFFFF; --k-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --k-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --k-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --k-radius: 2px; --k-radius-lg: 3px; --k-radius-sharp: 1px; --k-shadow: none; --k-scrim: rgba(27, 26, 23, .30); --k-dur: 120ms; --k-fs-body: 14px; --k-fs-sm: 13px; --k-fs-xs: 12px; --k-lh-body: 1.5; --k-tap: 36px; --k-control-pad: 8px 12px; /* Pastel semantic set: paler grounds, darker inks. Rows must stay readable at density, so ink is pushed further toward black. */ --k-great-bg: #D3EDDF; --k-great-ink: #0E4229; --k-great-line: #A6DABA; --k-good-bg: #DCE4F4; --k-good-ink: #14315C; --k-good-line: #B3C4E6; --k-warn-bg: #FCF3D4; --k-warn-ink: #5A3E00; --k-warn-line: #EEDB9C; --k-bad-bg: #FBE3E3; --k-bad-ink: #7A1F1F; --k-bad-line: #F0BFBF; --k-info-bg: #ECE6F8; --k-info-ink: #3E2A70; --k-info-line: #D3C7EF; --k-note-bg: #FCE9DC; --k-note-ink: #6B3610; --k-note-line: #F1CDB3; --k-neutral-bg: #F0EEE9; --k-neutral-ink: #4B463F; --k-neutral-line: #D9D5CC; --k-good: var(--k-great-ink); --k-alert: var(--k-bad-ink); --k-blue: var(--k-good-ink); --k-purple: var(--k-info-ink); --k-cyan: var(--k-good-ink); --k-cyan-l: var(--k-good-line); } [data-k-var="ledger"] :focus-visible { outline: 1.5px solid var(--k-ink); outline-offset: 1px; } [data-k-var="ledger"] .k-num, [data-k-var="ledger"] .k-tabular, [data-k-var="ledger"] .k-stat__val { font-family: var(--k-mono); font-weight: var(--k-fw-med); } /* --- Buttons: small, uppercase, invert on hover ---------------------- */ [data-k-var="ledger"] .k-btn { font-size: var(--k-fs-eyebrow); letter-spacing: var(--k-ls-label); text-transform: uppercase; font-weight: var(--k-fw-semi); padding: 8px 14px; min-height: var(--k-tap); border-color: var(--k-ink); transition: background var(--k-dur) linear, color var(--k-dur) linear, border-color var(--k-dur) linear; } [data-k-var="ledger"] .k-btn:hover { background: var(--k-surface); color: var(--k-ink); } [data-k-var="ledger"] .k-btn:active { transform: none; background: var(--k-surface-2); } [data-k-var="ledger"] .k-btn--ghost { color: var(--k-ink); border-color: var(--k-ink); } [data-k-var="ledger"] .k-btn--ghost:hover { background: var(--k-ink); color: var(--k-on-accent); } [data-k-var="ledger"] .k-btn--quiet { border-color: var(--k-line); } [data-k-var="ledger"] .k-btn--quiet:hover { border-color: var(--k-ink); background: var(--k-surface); } [data-k-var="ledger"] .k-btn--bare { border-color: transparent; text-transform: none; letter-spacing: 0; font-size: var(--k-fs-xs); } [data-k-var="ledger"] .k-btn--bare:hover { background: none; text-decoration: underline; text-underline-offset: 3px; } [data-k-var="ledger"] .k-btn--great { background: var(--k-great-bg); color: var(--k-great-ink); border-color: var(--k-great-ink); } [data-k-var="ledger"] .k-btn--great:hover { background: var(--k-great-ink); color: var(--k-great-bg); } [data-k-var="ledger"] .k-btn--bad { background: var(--k-bad-bg); color: var(--k-bad-ink); border-color: var(--k-bad-ink); } [data-k-var="ledger"] .k-btn--bad:hover { background: var(--k-bad-ink); color: var(--k-bad-bg); } [data-k-var="ledger"] .k-add { border-color: var(--k-line); padding: 6px; } [data-k-var="ledger"] .k-add:hover { border-color: var(--k-ink); color: var(--k-ink); border-style: solid; } /* --- Forms ----------------------------------------------------------- */ [data-k-var="ledger"] .k-input, [data-k-var="ledger"] .k-textarea, [data-k-var="ledger"] .k-select { font-size: var(--k-fs-body); padding: 7px 10px; min-height: var(--k-tap); border-color: var(--k-line); border-bottom-color: var(--k-faint); } [data-k-var="ledger"] .k-input:hover, [data-k-var="ledger"] .k-select:hover { border-color: var(--k-faint); } [data-k-var="ledger"] .k-input:focus-visible, [data-k-var="ledger"] .k-textarea:focus-visible, [data-k-var="ledger"] .k-select:focus-visible { outline: none; border-color: var(--k-ink); box-shadow: inset 0 -1px 0 var(--k-ink); } [data-k-var="ledger"] .k-label { font-family: var(--k-mono); font-weight: var(--k-fw-med); } /* --- Cards: hairline boxes ------------------------------------------- */ [data-k-var="ledger"] .k-card { padding: var(--k-sp-3) var(--k-sp-4); } [data-k-var="ledger"] .k-card--link:hover { border-color: var(--k-ink); } [data-k-var="ledger"] .k-card--lifted { border-color: var(--k-ink); } [data-k-var="ledger"] .k-card__head { padding-bottom: var(--k-sp-2); margin-bottom: var(--k-sp-2); border-bottom-color: var(--k-line); } [data-k-var="ledger"] .k-panel { border-radius: var(--k-radius); } /* --- Tags, chips, status --------------------------------------------- */ [data-k-var="ledger"] .k-tag { border-radius: var(--k-radius); padding: 2px 7px; font-family: var(--k-mono); font-size: var(--k-fs-eyebrow); letter-spacing: .06em; border: 1px solid var(--k-line); } [data-k-var="ledger"] .k-chip { border-radius: var(--k-radius); padding: 5px 10px; font-size: var(--k-fs-xs); } [data-k-var="ledger"] .k-chip:hover { border-color: var(--k-ink); background: var(--k-surface-2); } [data-k-var="ledger"] .k-status { font-family: var(--k-mono); font-size: var(--k-fs-xs); font-weight: var(--k-fw-med); padding: 1px 6px; border-radius: var(--k-radius); } [data-k-var="ledger"] .k-tab { min-height: 36px; font-size: var(--k-fs-xs); text-transform: uppercase; letter-spacing: var(--k-ls-label); font-weight: var(--k-fw-semi); } [data-k-var="ledger"] .k-tab[aria-selected="true"] { border-bottom-color: var(--k-ink); } [data-k-var="ledger"] .k-nav a { font-size: var(--k-fs-xs); padding: 6px 10px; } [data-k-var="ledger"] .k-nav a[aria-current] { color: var(--k-ink); text-decoration: underline; text-underline-offset: 4px; } [data-k-var="ledger"] .k-topbar { padding-block: var(--k-sp-2); border-bottom-color: var(--k-ink); } /* --- Tables: the centre of this variation ---------------------------- */ [data-k-var="ledger"] .k-table { font-size: var(--k-fs-sm); } [data-k-var="ledger"] .k-table th { border-bottom: 1px solid var(--k-ink); color: var(--k-ink); padding: 0 var(--k-sp-3) 6px 6px; font-family: var(--k-mono); font-weight: var(--k-fw-med); letter-spacing: .06em; } [data-k-var="ledger"] .k-table td { padding: 7px var(--k-sp-3) 7px 6px; border-bottom: 1px solid var(--k-line-soft); vertical-align: middle; } [data-k-var="ledger"] .k-table tr:last-child td { border-bottom: 1px solid var(--k-line); } [data-k-var="ledger"] .k-table tbody tr:hover td { background: var(--k-surface-2); } /* --- Notes and stats ------------------------------------------------- */ [data-k-var="ledger"] .k-note { padding: var(--k-sp-2) var(--k-sp-3); border: 1px solid var(--k-line); border-radius: var(--k-radius); font-size: var(--k-fs-xs); background: var(--k-surface-2); } [data-k-var="ledger"] .k-note strong { font-family: var(--k-mono); font-weight: var(--k-fw-med); text-transform: uppercase; letter-spacing: .06em; font-size: var(--k-fs-eyebrow); margin-right: var(--k-sp-2); } [data-k-var="ledger"] .k-stat { padding: var(--k-sp-2) var(--k-sp-3); border-left: 0; border-top: 1px solid var(--k-ink); } [data-k-var="ledger"] .k-stat__val { font-size: 22px; } [data-k-var="ledger"] .k-stat__label { font-family: var(--k-mono); } [data-k-var="ledger"] .k-bar { height: 4px; border-radius: 0; } [data-k-var="ledger"] .k-bar__fill { background: var(--k-ink); } [data-k-var="ledger"] .k-toast { border-radius: var(--k-radius); font-family: var(--k-mono); font-size: var(--k-fs-xs); } /* --- Semantic fills: tint plus matching hairline --------------------- */ [data-k-var="ledger"] .k-tag--great, [data-k-var="ledger"] .k-status--great, [data-k-var="ledger"] .k-note--great, [data-k-var="ledger"] .k-card--great, [data-k-var="ledger"] .k-stat--great { background: var(--k-great-bg); color: var(--k-great-ink); border-color: var(--k-great-line); } [data-k-var="ledger"] .k-tag--good, [data-k-var="ledger"] .k-status--good, [data-k-var="ledger"] .k-note--good, [data-k-var="ledger"] .k-card--good, [data-k-var="ledger"] .k-stat--good { background: var(--k-good-bg); color: var(--k-good-ink); border-color: var(--k-good-line); } [data-k-var="ledger"] .k-tag--warn, [data-k-var="ledger"] .k-status--warn, [data-k-var="ledger"] .k-note--warn, [data-k-var="ledger"] .k-card--warn, [data-k-var="ledger"] .k-stat--warn { background: var(--k-warn-bg); color: var(--k-warn-ink); border-color: var(--k-warn-line); } [data-k-var="ledger"] .k-tag--bad, [data-k-var="ledger"] .k-status--bad, [data-k-var="ledger"] .k-note--bad, [data-k-var="ledger"] .k-card--bad, [data-k-var="ledger"] .k-stat--bad { background: var(--k-bad-bg); color: var(--k-bad-ink); border-color: var(--k-bad-line); } [data-k-var="ledger"] .k-tag--info, [data-k-var="ledger"] .k-status--info, [data-k-var="ledger"] .k-note--info, [data-k-var="ledger"] .k-card--info, [data-k-var="ledger"] .k-stat--info { background: var(--k-info-bg); color: var(--k-info-ink); border-color: var(--k-info-line); } [data-k-var="ledger"] .k-tag--note, [data-k-var="ledger"] .k-status--note, [data-k-var="ledger"] .k-note--note, [data-k-var="ledger"] .k-card--note, [data-k-var="ledger"] .k-stat--note { background: var(--k-note-bg); color: var(--k-note-ink); border-color: var(--k-note-line); } [data-k-var="ledger"] .k-tag--neutral,[data-k-var="ledger"] .k-status--neutral,[data-k-var="ledger"] .k-note--neutral,[data-k-var="ledger"] .k-card--neutral,[data-k-var="ledger"] .k-stat--neutral{ background: var(--k-neutral-bg);color: var(--k-neutral-ink);border-color: var(--k-neutral-line); } [data-k-var="ledger"] .k-stat--great, [data-k-var="ledger"] .k-stat--good, [data-k-var="ledger"] .k-stat--warn, [data-k-var="ledger"] .k-stat--bad, [data-k-var="ledger"] .k-stat--info, [data-k-var="ledger"] .k-stat--note, [data-k-var="ledger"] .k-stat--neutral { border-top-color: currentColor; } [data-k-var="ledger"] .k-stat--great .k-stat__val, [data-k-var="ledger"] .k-stat--good .k-stat__val, [data-k-var="ledger"] .k-stat--warn .k-stat__val, [data-k-var="ledger"] .k-stat--bad .k-stat__val, [data-k-var="ledger"] .k-stat--info .k-stat__val, [data-k-var="ledger"] .k-stat--note .k-stat__val, [data-k-var="ledger"] .k-stat--neutral .k-stat__val, [data-k-var="ledger"] .k-stat--great .k-stat__label, [data-k-var="ledger"] .k-stat--good .k-stat__label, [data-k-var="ledger"] .k-stat--warn .k-stat__label, [data-k-var="ledger"] .k-stat--bad .k-stat__label, [data-k-var="ledger"] .k-stat--info .k-stat__label, [data-k-var="ledger"] .k-stat--note .k-stat__label, [data-k-var="ledger"] .k-stat--neutral .k-stat__label { color: inherit; } /* Rows: whole row tinted; hover deepens the tint one step. */ [data-k-var="ledger"] .k-tr--great td { background: var(--k-great-bg); color: var(--k-great-ink); } [data-k-var="ledger"] .k-tr--good td { background: var(--k-good-bg); color: var(--k-good-ink); } [data-k-var="ledger"] .k-tr--warn td { background: var(--k-warn-bg); color: var(--k-warn-ink); } [data-k-var="ledger"] .k-tr--bad td { background: var(--k-bad-bg); color: var(--k-bad-ink); } [data-k-var="ledger"] .k-tr--info td { background: var(--k-info-bg); color: var(--k-info-ink); } [data-k-var="ledger"] .k-tr--note td { background: var(--k-note-bg); color: var(--k-note-ink); } [data-k-var="ledger"] .k-tr--neutral td{ background: var(--k-neutral-bg);color: var(--k-neutral-ink); } [data-k-var="ledger"] .k-tr--great:hover td { background: var(--k-great-line); } [data-k-var="ledger"] .k-tr--good:hover td { background: var(--k-good-line); } [data-k-var="ledger"] .k-tr--warn:hover td { background: var(--k-warn-line); } [data-k-var="ledger"] .k-tr--bad:hover td { background: var(--k-bad-line); } [data-k-var="ledger"] .k-tr--info:hover td { background: var(--k-info-line); } [data-k-var="ledger"] .k-tr--note:hover td { background: var(--k-note-line); } [data-k-var="ledger"] .k-tr--neutral:hover td{ background: var(--k-neutral-line); } [data-k-var="ledger"] .k-chip--great.is-on { background: var(--k-great-bg); color: var(--k-great-ink); border-color: var(--k-great-ink); } [data-k-var="ledger"] .k-chip--good.is-on { background: var(--k-good-bg); color: var(--k-good-ink); border-color: var(--k-good-ink); } [data-k-var="ledger"] .k-chip--warn.is-on { background: var(--k-warn-bg); color: var(--k-warn-ink); border-color: var(--k-warn-ink); } [data-k-var="ledger"] .k-chip--bad.is-on { background: var(--k-bad-bg); color: var(--k-bad-ink); border-color: var(--k-bad-ink); } [data-k-var="ledger"] .k-chip--info.is-on { background: var(--k-info-bg); color: var(--k-info-ink); border-color: var(--k-info-ink); } [data-k-var="ledger"] .k-dot { border-radius: 1px; } [data-k-var="ledger"] .k-dot--great { background: var(--k-great-ink); } [data-k-var="ledger"] .k-dot--good { background: var(--k-good-ink); } [data-k-var="ledger"] .k-dot--warn { background: var(--k-warn-ink); } [data-k-var="ledger"] .k-dot--bad { background: var(--k-bad-ink); } [data-k-var="ledger"] .k-dot--info { background: var(--k-info-ink); } [data-k-var="ledger"] .k-dot--note { background: var(--k-note-ink); } [data-k-var="ledger"] .k-bar__fill--great { background: var(--k-great-ink); } [data-k-var="ledger"] .k-bar__fill--bad { background: var(--k-bad-ink); } [data-k-var="ledger"] .k-bar__fill--warn { background: var(--k-warn-ink); } /* --- Touch targets --------------------------------------------------- The 36px --k-tap above is right for a mouse and this variation's density, and too small for a finger. Restore the 44px minimum only where the pointer is actually coarse, so the desktop stays dense. */ @media (pointer: coarse) { [data-klovo-theme="console"][data-k-var="ledger"] { --k-tap: 44px; } }