/*
* Kardama Design System
* Single source of truth for tokens, reset, and shared UI components.
* Loaded first in every HTML page's .
* Do NOT add page-specific layout rules here.
*
* Google Fonts must be loaded by each page's own tag — this file
* references 'Onest' and 'JetBrains Mono' but does not import them.
*/
/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
/* ══ CANONICAL — edit only these; all aliases auto-follow ══ */
--dt-font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--dt-ink: #17171B; --dt-ink-2: #4A4A52; --dt-ink-3: #63636D; --dt-ink-4: #A0A0AC;
--dt-canvas: #FAF9FC; --dt-card: #FFFFFF; --dt-card-2: #F4F2F8;
--dt-dark: #16161A; --dt-dark-2: #232329;
--dt-grad-a: #D9C9F1; --dt-grad-b: #EFD4E6; --dt-grad-c: #F6D8DC;
--dt-pink: #F9D8DE; --dt-pink-2: #F3BFCB;
--dt-lilac: #E7DDF6; --dt-lilac-2: #CBB6EC;
--dt-green: #3DC65A; --dt-green-l: #E4F7E9; --dt-green-t: #157A31;
--dt-red: #E5484D; --dt-red-l: #FCE4E6; --dt-red-t: #C2262C;
--dt-amber: #D98A16; --dt-amber-l: #FBF0DA; --dt-amber-t: #8F5A0B;
--dt-blue: #4E7FE1; --dt-blue-l: #E4EBFA; --dt-blue-t: #2C56A8;
--dt-violet: #8B6FC9; --dt-violet-t: #5B4394;
--dt-bdr: #ECEAF1; --dt-bdr-2: #E0DDE8;
--dt-sh-soft: 0 2px 10px rgba(23,23,27,.05);
--dt-sh-card: 0 8px 30px rgba(23,23,27,.08);
--dt-sh-float: 0 18px 50px rgba(23,23,27,.14);
--dt-sh-chip: 0 1px 3px rgba(23,23,27,.07);
--dt-r-pill: 999px; --dt-r-xl: 28px; --dt-r-lg: 20px; --dt-r-md: 14px; --dt-r-sm: 10px;
--dt-trans: .18s cubic-bezier(.4,0,.2,1);
--dt-fs-hero: 34px; --dt-fs-h1: 26px; --dt-fs-h2: 19px;
--dt-fs-body: 15px; --dt-fs-sm: 13px; --dt-fs-xs: 11.5px;
/* ── Convenience aliases (superset — pages may redefine any of these) ── */
--bg: var(--dt-card); --bg2: var(--dt-canvas); --bg3: var(--dt-card-2);
--surf: var(--dt-card); --surf2: var(--dt-canvas); --surface: var(--dt-card);
--bdr: var(--dt-bdr); --bdr2: var(--dt-bdr-2);
--ink: var(--dt-ink); --ink2: var(--dt-ink-2); --ink3: var(--dt-ink-3); --ink4: var(--dt-ink-4);
--always-white: var(--dt-card);
--muted: var(--dt-ink-3);
--red: var(--dt-dark); --red-l: var(--dt-lilac); --red-m: var(--dt-lilac-2);
--danger: var(--dt-red-t); --danger-l: var(--dt-red-l); --danger-m: #F5B8BC;
--gold: var(--dt-amber-t); --gold-l: var(--dt-amber-l); --gold-m: var(--dt-amber-l);
--green: var(--dt-green-t); --grn-l: var(--dt-green-l); --grn-m: var(--dt-green-l);
--blue: var(--dt-blue-t); --blue-l: var(--dt-blue-l); --blue-m: var(--dt-blue-l);
--blue-m2: rgba(78,127,225,.18);
--purple: var(--dt-violet-t); --pur-l: var(--dt-lilac); --pur-m: var(--dt-lilac);
--violet: var(--dt-violet); --violet-t: var(--dt-violet-t);
--lilac: var(--dt-lilac); --lilac2: var(--dt-lilac-2);
--pink: var(--dt-pink); --pink2: var(--dt-pink-2);
--amber: var(--dt-amber-t); --amber-l: var(--dt-amber-l);
--sh: var(--dt-sh-soft); --sh-md: var(--dt-sh-card);
--r: var(--dt-r-md); --rL: var(--dt-r-lg); --rXL: var(--dt-r-xl);
--trans: var(--dt-trans);
--font: var(--dt-font); --font-display: var(--dt-font);
--font-mono: 'JetBrains Mono', monospace;
}
/* ── Base reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--dt-font); color: var(--dt-ink); font-size: var(--dt-fs-body); background: var(--dt-canvas); }
button { font-family: var(--dt-font); cursor: pointer; border: none; outline: none; background: none; }
input, select, textarea { font-family: var(--dt-font); color: var(--dt-ink); }
a { color: inherit; text-decoration: none; }
/* ── Form focus ring ────────────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
outline: none !important;
border-color: var(--dt-lilac-2) !important;
box-shadow: 0 0 0 3px var(--dt-lilac) !important;
}
/* ── Toast queue ────────────────────────────────────────────────────────── */
/*
* Pages may pre-place in HTML or let ui.js create it.
* Messages are appended as .t-msg children and auto-remove after 3.5s.
*/
#toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; gap: 6px; align-items: center;
z-index: 99999; pointer-events: none;
}
#toast .t-msg {
padding: 10px 22px; border-radius: var(--dt-r-pill);
box-shadow: var(--dt-sh-float); font-size: 13px; font-weight: 600;
font-family: var(--dt-font); background: var(--dt-dark); color: #fff;
pointer-events: auto; white-space: nowrap;
animation: _t-in .18s ease, _t-out .18s ease 3.3s forwards;
}
#toast .t-msg.err { background: var(--dt-red-t); }
#toast .t-msg.warn { background: var(--dt-amber-t); }
#toast .t-msg.ok { background: var(--dt-dark); }
@keyframes _t-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes _t-out { to { opacity: 0; transform: translateY(-4px); } }
/* ── Audio pill player ──────────────────────────────────────────────────── */
.out-audio-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.out-audio-row:last-child { margin-bottom: 0; }
.out-audio-lbl { font-size: 10px; font-weight: 700; color: var(--ink4); text-transform: uppercase; letter-spacing: .07em; }
.audio-pill {
display: flex; align-items: center; gap: 12px;
background: var(--dt-card); border-radius: var(--dt-r-pill);
padding: 9px 16px 9px 9px; box-shadow: var(--dt-sh-card);
}
.ap-play {
width: 40px; height: 40px; border-radius: 50%;
background: var(--dt-dark); color: #fff;
font-size: 13px; cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: transform var(--dt-trans); border: none;
}
.ap-play:hover { transform: scale(1.06); }
.ap-wave { flex: 1; display: flex; align-items: center; gap: 2.5px; height: 28px; overflow: hidden; }
.ap-wave i { flex: 1; border-radius: 99px; background: var(--dt-lilac-2); min-width: 2px; transition: background .12s; }
.ap-wave i.played { background: var(--dt-dark); }
.ap-time {
font-size: 10px; color: var(--ink4);
font-variant-numeric: tabular-nums; flex-shrink: 0;
font-family: var(--font-mono);
}
/* ── Video card player ──────────────────────────────────────────────────── */
.out-video-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.out-video-row:last-child { margin-bottom: 0; }
.out-video-lbl { font-size: 10px; font-weight: 700; color: var(--ink4); text-transform: uppercase; letter-spacing: .07em; }
.video-card {
position: relative; border-radius: var(--dt-r-xl);
overflow: hidden; box-shadow: var(--dt-sh-card); background: var(--dt-dark);
}
.vc-bar {
position: absolute; left: 14px; right: 14px; bottom: 12px;
display: flex; align-items: center; gap: 12px;
background: rgba(20,18,17,.55); backdrop-filter: blur(10px);
border-radius: var(--dt-r-pill); padding: 9px 16px; color: #fff;
}
.vc-play { cursor: pointer; font-size: 13px; flex-shrink: 0; user-select: none; }
.vc-time { font-size: 10px; font-variant-numeric: tabular-nums; opacity: .9; white-space: nowrap; font-family: var(--font-mono); }
.vc-track {
flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.28);
position: relative; --vc-pct: 0%; cursor: pointer;
}
.vc-track::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: var(--vc-pct); border-radius: 99px; background: #fff; transition: width .1s;
}
.vc-track::after {
content: ''; position: absolute; left: var(--vc-pct); top: 50%;
width: 10px; height: 10px; border-radius: 50%;
background: #fff; transform: translate(-50%,-50%);
}
.vc-actions { display: flex; gap: 10px; font-size: 13px; opacity: .9; flex-shrink: 0; }
.vc-actions span { cursor: pointer; user-select: none; }
/* ── Iframe embed containers ────────────────────────────────────────────── */
.out-iframe-wrap { border-radius: var(--dt-r-md); overflow: hidden; border: 1.5px solid var(--dt-bdr); margin-top: 12px; }
.out-iframe-wrap iframe { width: 100%; border: none; display: block; }
/* ── Button system ──────────────────────────────────────────────────────── */
/*
* Base .btn + core variants shared across all pages.
* Page-specific variants (btn-green, btn-teal, btn-run-pipeline, etc.) stay local.
*/
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 16px; border-radius: var(--dt-r-pill);
font-size: 13px; font-weight: 600; font-family: var(--dt-font);
border: 1px solid transparent; cursor: pointer;
transition: all var(--dt-trans); white-space: nowrap; text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--dt-dark); color: #fff; border-color: var(--dt-dark); }
.btn-primary:hover { background: var(--dt-dark-2); }
.btn-ghost { background: var(--dt-card-2); border-color: var(--dt-bdr); color: var(--dt-ink-2); }
.btn-ghost:hover { background: var(--dt-bdr); }
.btn-danger { background: var(--dt-red-l); border-color: rgba(229,72,77,.25); color: var(--dt-red-t); }
.btn-danger:hover { background: var(--dt-red-l); border-color: var(--dt-red-t); }
.btn-sm { padding: 4px 12px; font-size: 11px; }
/* ── Spinner ────────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; display: inline-block; }
/* ── Tab panel toggle ───────────────────────────────────────────────────── */
/* Panels use display:none / .active{display:block}. Tab button styles stay local. */
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* ── Agent output renderer ──────────────────────────────────────────────── */
/*
* Shared with any page that loads /static/js/agent_output_renderer.js.
* Do NOT redefine these in page