/* meeting-agent — sistema visual completo (port do Claude Design)
Tokens em OKLCH, dark default, density configurável, atoms reutilizáveis.
─────────────────────────────────────────────────────────────── */
:root {
/* Accent (indigo/violet) — pode ser sobrescrito por usuário */
--acc-h: 280;
--acc-c: 0.16;
--acc-l: 0.68;
--accent: oklch(var(--acc-l) var(--acc-c) var(--acc-h));
--accent-soft: oklch(var(--acc-l) var(--acc-c) var(--acc-h) / 0.14);
--accent-line: oklch(var(--acc-l) var(--acc-c) var(--acc-h) / 0.32);
--accent-text: oklch(0.82 0.1 var(--acc-h));
/* Status (constante entre temas) */
--ok: oklch(0.74 0.13 155);
--ok-soft: oklch(0.74 0.13 155 / 0.14);
--warn: oklch(0.8 0.14 75);
--warn-soft: oklch(0.8 0.14 75 / 0.14);
--bad: oklch(0.68 0.18 22);
--bad-soft: oklch(0.68 0.18 22 / 0.14);
--info: oklch(0.74 0.13 230);
--info-soft: oklch(0.74 0.13 230 / 0.14);
--u: 4px;
--font-sans: "Geist", "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
}
/* ── Dark (default) ─────────────────────────────── */
:root,
[data-theme="dark"] {
color-scheme: dark; /* pinta picker nativo do etc. em dark */
--bg: oklch(0.16 0.006 280);
--bg-2: oklch(0.19 0.007 280);
--surface: oklch(0.21 0.008 280);
--surface-2: oklch(0.24 0.009 280);
--surface-hi: oklch(0.27 0.01 280);
--border: oklch(0.31 0.01 280);
--border-soft: oklch(0.26 0.009 280);
--text: oklch(0.97 0.005 280);
--text-dim: oklch(0.72 0.008 280);
--text-mute: oklch(0.55 0.008 280);
--text-faint: oklch(0.42 0.008 280);
--shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
--shadow-card: 0 0 0 1px var(--border-soft), 0 1px 0 rgba(255,255,255,.03) inset;
--grid-line: rgba(255,255,255,.03);
--accent-fg: oklch(0.15 0.02 280);
}
/* ── Light ───────────────────────────── */
[data-theme="light"] {
color-scheme: light;
--bg: oklch(0.985 0.003 280);
--bg-2: oklch(0.97 0.004 280);
--surface: oklch(1 0 0);
--surface-2: oklch(0.975 0.004 280);
--surface-hi: oklch(0.955 0.005 280);
--border: oklch(0.9 0.006 280);
--border-soft: oklch(0.93 0.005 280);
--text: oklch(0.22 0.012 280);
--text-dim: oklch(0.42 0.012 280);
--text-mute: oklch(0.58 0.01 280);
--text-faint: oklch(0.72 0.008 280);
--shadow-1: 0 1px 2px rgba(15,15,40,.06), 0 8px 24px rgba(15,15,40,.06);
--shadow-card: 0 0 0 1px var(--border-soft), 0 1px 0 rgba(255,255,255,.6) inset;
--grid-line: rgba(0,0,0,.04);
--accent-fg: white;
}
/* ── Density ─────────────────────────── */
[data-density="compact"] { --u: 3px; }
[data-density="regular"] { --u: 4px; }
[data-density="spacious"] { --u: 5px; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--text);
font-feature-settings: "ss01", "cv11";
letter-spacing: -0.005em;
overflow: hidden;
font-size: 14px;
line-height: 1.5;
}
button {
font-family: inherit;
font-size: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
letter-spacing: inherit;
}
input, textarea, select {
font-family: inherit;
color: inherit;
background: transparent;
border: 0;
outline: 0;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
/* ── App shell ─────────────────────────────────── */
/* #app é o root onde os views são montados; precisa ser flex column de
altura total pra que o .app-body (flex:1) preencha o restante após o
appbar e a nav-rail vá até o fim da tela mesmo com conteúdo curto. */
#app, .app {
height: 100%;
display: flex;
flex-direction: column;
}
/* Top app bar */
.appbar {
height: 52px;
flex: 0 0 auto;
display: flex;
align-items: center;
gap: calc(var(--u) * 3);
padding: 0 calc(var(--u) * 4);
border-bottom: 1px solid var(--border-soft);
background: linear-gradient(180deg, var(--bg-2), var(--bg));
position: relative;
z-index: 10;
}
.brand {
display: flex;
align-items: center;
gap: calc(var(--u) * 2);
font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer;
}
/* Logo Ehwaz como mask: o glyph herda o accent (responde a tema/acento),
sem fundo. drop-shadow respeita o alpha → halo só ao redor do traço. */
.brand-glyph {
width: 21px; height: 21px;
/* Runa Algiz como