/*
 * VoltType theme — the CSS half of design/volttype-theme/tokens.json.
 * Windows renderer and web app: link this AFTER styles.css (or paste the :root block into it).
 * The base names (--ink, --page, --card, --blue…) already exist in renderer/styles.css with the
 * same values; this file ADDS what the 2026-09-23 design introduced and gives every colour a
 * dark twin. Decided by the Chairman 2026-09-22/23; canvas https://claude.ai/artifact/GADttJ6yo6dvZxTRYMUqFJ
 */
:root {
  /* surfaces */
  --page: #EEF1F5;  --card: #FFFFFF;  --panel: #F8FAFC;  --chips: #F1F5F9;  --line: #E2E8F0;
  /* ink */
  --ink: #0F172A;  --secondary: #475569;  --muted: #64748B;  --faint: #94A3B8;
  /* accent */
  --blue: #2563EB;  --blue-soft: #EFF4FE;  --blue-w: #2F6BFF;  --teal: #22C19B;
  /* on this PC — anything that says the voice stayed here */
  --device: #0F6E56;  --device-fill: #E7F6EF;  --device-dot: #16A34A;  --device-deep: #04342C;
  /* Pro */
  --pro: #4C3FBF;  --pro-fill: #EFEDFD;  --pro-fill-soft: #F3F1FE;  --pro-deep: #2E2477;  --pro-line: #DCD7FB;
  /* stop / warn */
  --stop: #E24B4A;  --stop-fill: #FCEBEB;  --stop-ink: #A32D2D;  --warn: #EF9F27;
  /* the left rail, always dark */
  --sidebar: #101827;  --sidebar-active: #1E293B;  --sidebar-plan: #172033;  --sidebar-accent: #22D3EE;  --sidebar-ink: #94A3B8;
  /* shape */
  --r-chip: 10px;  --r-card: 16px;  --r-panel: 22px;  --r-button: 12px;  --r-pill: 999px;
  /* type */
  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-label: 'Space Grotesk', ui-monospace, monospace;
}
:root[data-theme="dark"], .theme-dark {
  --page: #0D1320;  --card: #141C2B;  --panel: #1A2335;  --chips: #1F2A3D;  --line: rgba(255,255,255,0.15);
  --ink: #E8EEF8;  --secondary: #B3BFD1;  --muted: #8592A8;  --faint: #55637A;
  --blue: #2F6BFF;  --blue-soft: #1B2B4D;  --blue-w: #4C83FF;
  --device: #2EDB8A;  --device-fill: #0F2A22;  --device-dot: #2EDB8A;  --device-deep: #DFF7EC;
  --pro: #A99CFF;  --pro-fill: #231F45;  --pro-fill-soft: #1E1B3A;  --pro-deep: #E4DFFF;  --pro-line: #3A3470;
  --stop: #F06B6A;  --stop-fill: #3A1A1A;  --stop-ink: #F5A3A3;  --warn: #F5B34F;
  --sidebar: #0B1220;  --sidebar-plan: #141C2B;
}

/* ---- the pieces every screen is built from --------------------------------------------- */

/* section label: YOUR LANGUAGE · ON THIS PC · NO INTERNET NEEDED */
.vt-label { font: 500 11px/1.4 var(--font-label); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.vt-label.device { color: var(--device); }
/* the small line under a title: one download · 2 GB · Wi-Fi only */
.vt-meta { font: 400 12px/1.4 var(--font-label); color: var(--faint); }

/* the status line: ● typed on this PC · nothing is sent */
.vt-status { display: flex; align-items: center; gap: 7px; font: 400 13px/1.4 var(--font-label); color: var(--device); }
.vt-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--device-dot); }

/* the receipt: Nothing has left this PC today — 0 bytes */
.vt-receipt { background: var(--device-fill); border-radius: var(--r-card); padding: 18px 20px; color: var(--device); }
.vt-receipt .number { font: 700 44px/1.1 var(--font-ui); letter-spacing: -.02em; color: var(--device-deep); }
.vt-receipt .unit { font: 500 18px/1 var(--font-ui); color: var(--device); margin-left: 8px; }

/* language chips */
.vt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: var(--r-pill);
  font: 400 13px/1 var(--font-ui); color: var(--ink); background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.vt-chip.selected { background: var(--ink); color: var(--card); border-color: var(--ink); font-weight: 600; }
.vt-chip.auto { background: var(--device-fill); color: var(--device); border-color: #A7DCC6; font-weight: 500; }
.vt-chip.locked { background: transparent; color: var(--muted); border: 1px dashed #CBD5E1; }   /* the 74: visible, never hidden */

/* PRO badge */
.vt-pro { display: inline-block; font: 600 11px/1 var(--font-label); letter-spacing: .06em; color: var(--pro); background: var(--pro-fill); border-radius: 6px; padding: 3px 9px; }

/* verdict pills in the Trust log */
.vt-pill { display: inline-block; font: 400 12px/1 var(--font-label); border-radius: 7px; padding: 5px 10px; }
.vt-pill.device { color: var(--device); background: var(--device-fill); }
.vt-pill.stopped { color: var(--stop-ink); background: var(--stop-fill); }
.vt-pill.asked { color: var(--secondary); background: var(--chips); }

/* a pack offered where it is wanted */
.vt-pack { background: var(--card); border: 1px solid var(--pro-line); border-radius: var(--r-card); padding: 16px 18px; }
.vt-pack .tile { width: 42px; height: 42px; border-radius: 12px; background: var(--pro-fill-soft); display: flex; align-items: center; justify-content: center; }
.vt-pack .go { background: var(--pro); color: #fff; border: 0; border-radius: var(--r-button); padding: 11px 15px; font: 600 14px/1 var(--font-ui); }

/* buttons: one primary per screen */
.vt-btn { border: 0; border-radius: var(--r-button); padding: 11px 16px; font: 600 14px/1 var(--font-ui); cursor: pointer; }
.vt-btn.primary { background: var(--blue); color: #fff; }
.vt-btn.quiet { background: var(--blue-soft); color: var(--blue); font-weight: 500; }
.vt-btn.stop { background: var(--stop); color: #fff; }
.vt-btn.plain { background: var(--chips); color: var(--ink); }

/* the left rail */
.vt-sidebar { width: 236px; background: var(--sidebar); padding: 22px 16px; display: flex; flex-direction: column; gap: 22px; }
.vt-sidebar .row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; font: 400 14px/1 var(--font-ui); color: var(--sidebar-ink); }
.vt-sidebar .row.active { background: var(--sidebar-active); color: #fff; font-weight: 500; }
.vt-sidebar .plan { margin-top: auto; background: var(--sidebar-plan); border-radius: 12px; padding: 13px 14px; }
.vt-sidebar .plan .bar { height: 5px; border-radius: 999px; background: #0B1220; overflow: hidden; }
.vt-sidebar .plan .bar > span { display: block; height: 100%; background: var(--sidebar-accent); }
.vt-sidebar .plan .go { display: block; text-align: center; margin-top: 11px; background: var(--sidebar-accent); color: #0F172A; border-radius: 9px; padding: 9px 0; font: 600 13px/1 var(--font-ui); text-decoration: none; }

/* toggles */
.vt-toggle { width: 42px; height: 25px; border-radius: 999px; background: var(--line); position: relative; }
.vt-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: left .15s; }
.vt-toggle.on { background: var(--blue); }
.vt-toggle.on::after { left: 20px; }