/* app.argent.css — the Argent skin (instrument aesthetic).
 *
 * Loaded ONLY when skin=argent (the template head gates the <link> behind
 * {{if eq skin "argent"}}), so the classic UI never pays for it and rollback is
 * a config flip. See DESIGN-argent-design-system.md / DESIGN-ui-redesign.md.
 *
 * Everything is scoped under html.skin-argent so it can coexist with classic.
 * Phase 0 = the token remap (reskins the whole existing UI by overriding the
 * custom properties app.css already consumes) + the mono promotion + a few
 * essential overrides. Per-component polish + the new primitives land in Phase 1.
 */

/* ── Courier Prime (self-hosted) — a free OFL Courier that Joe judged the closest
 * match to the native Courier New the Argent chain resolves to on devices that have
 * it. Only used as the fallback for devices WITHOUT Courier New (e.g. Linux desktop,
 * which otherwise grabbed a clunky sans) — so the Courier look renders everywhere.
 * Argent-skin only; self-hosted, no CDN call at runtime (Tor/privacy-clean). */
@font-face{ font-family:'Courier Prime'; src:url('/static/courier-prime-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Courier Prime'; src:url('/static/courier-prime-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ── Tokens: remap the variables app.css already uses ───────────────────────── */
/* :root bumps specificity to (0,2,1) so we beat app.css's OS-light block
 * `html:not(.light):not(.dark)` (also 0,2,1 — we win on source order, loaded later)
 * and the explicit `html.light` (0,1,1). This is the dark hero + OS-dark base;
 * the light counterpart (paper/graphite) follows and tracks the same theme toggle. */
html.skin-argent:root {
  --bg:#08090a; --text:#e9ebee; --muted:#8b9098; --muted2:#565c64;
  --panel:#0e0f11; --panel2:#121316; --asst:#0e0f11;
  --border:#23262b; --border2:#2e333a; --hair:#1b1e22; --hair2:#1b1e22;
  --role:#8b9098; --h2:#c8ccd2; --link:#9aa0a8;

  /* retire the white "inverted" button → bordered ghost + one verify accent */
  --btn-bg:#15171a; --btn-text:#e9ebee; --btn-ghost:#15171a;

  /* five loud status families collapse to two calm signals + warn/err */
  --warn-bg:#1e1a10; --warn-bd:#3a3320; --warn-tx:#d8b673;
  --err-bg:#1a1012;  --err-bd:#4a3a3a;  --err-ac:#d89a9a; --err-tx:#d89a9a;
  --ok-bg:#0f1a15;   --ok-bd:#33433c;   --ok-tx:#7fd6b0;   /* verify */
  --info-bg:#101820; --info-bd:#2a3a4a; --info-ac:#7aa7d8; --info-tx:#7aa7d8; /* live */
  --seed-bg:#1c1810; --seed-bd:#3a3320; --seed-tx:#d8b673;
  --num:#565c64;

  /* signal accents (new names for Argent primitives; don't collide with classic) */
  --silver:#c8ccd2; --verify:#7fd6b0; --live:#7aa7d8; --faint:#565c64;
  --hexspark:#4ade80; /* chat-globe green for the hero hexagon circuit (dark) */

  /* one family: JetBrains Mono is already bundled (the code font) */
  --ui-font:"Courier Prime", "Courier New", monospace; /* self-hosted Courier Prime FIRST so it wins everywhere — Linux fontconfig aliases "Courier New" to a sans substitute, so it can't be relied on as the primary */
}

/* Argent follows the existing dark/light toggle (the moon icon); the block above is
 * the dark hero + OS-dark base, the blocks below are the paper/graphite light
 * counterpart. Background + text track the active tokens. */
html.skin-argent:root { background:var(--bg); color:var(--text); }

/* ── Argent light (paper / graphite) ────────────────────────────────────────── */
/* Explicit light choice. Specificity (0,3,1) beats the dark base (0,2,1). */
html.skin-argent.light:root {
  --bg:#f4f5f7; --text:#181b1f; --muted:#5b616a; --muted2:#868d96;
  --panel:#ffffff; --panel2:#eef0f3; --asst:#ffffff;
  --border:#d8dbe1; --border2:#c4c9d1; --hair:#e7e9ed; --hair2:#eef0f3;
  --role:#5b616a; --h2:#2b2f36; --link:#3a72b0;
  --btn-bg:#ffffff; --btn-text:#181b1f; --btn-ghost:#eef0f3;
  --warn-bg:#f7efd6; --warn-bd:#e6d49a; --warn-tx:#8a6a16;
  --err-bg:#f7dede; --err-bd:#e6b3b3; --err-ac:#b05656; --err-tx:#9a4646;
  --ok-bg:#dff0e6; --ok-bd:#a9d9bf; --ok-tx:#1f7a52;   /* verify */
  --info-bg:#deeaf5; --info-bd:#a9c8e6; --info-ac:#3a72b0; --info-tx:#2f5f96; /* live */
  --seed-bg:#f5efda; --seed-bd:#e6d9a0; --seed-tx:#7a6010;
  --num:#868d96;
  --silver:#2b2f36; --verify:#1f7a52; --live:#3a72b0; --faint:#868d96; --hexspark:#16a34a;
}
/* OS prefers light + no explicit choice (mirrors app.css's prefers-color-scheme
 * fallback). Specificity (0,4,1) wins; source order favours Argent too. */
@media (prefers-color-scheme: light){
  html.skin-argent:root:not(.light):not(.dark){
    --bg:#f4f5f7; --text:#181b1f; --muted:#5b616a; --muted2:#868d96;
    --panel:#ffffff; --panel2:#eef0f3; --asst:#ffffff;
    --border:#d8dbe1; --border2:#c4c9d1; --hair:#e7e9ed; --hair2:#eef0f3;
    --role:#5b616a; --h2:#2b2f36; --link:#3a72b0;
    --btn-bg:#ffffff; --btn-text:#181b1f; --btn-ghost:#eef0f3;
    --warn-bg:#f7efd6; --warn-bd:#e6d49a; --warn-tx:#8a6a16;
    --err-bg:#f7dede; --err-bd:#e6b3b3; --err-ac:#b05656; --err-tx:#9a4646;
    --ok-bg:#dff0e6; --ok-bd:#a9d9bf; --ok-tx:#1f7a52;
    --info-bg:#deeaf5; --info-bd:#a9c8e6; --info-ac:#3a72b0; --info-tx:#2f5f96;
    --seed-bg:#f5efda; --seed-bd:#e6d9a0; --seed-tx:#7a6010;
    --num:#868d96;
    --silver:#2b2f36; --verify:#1f7a52; --live:#3a72b0; --faint:#868d96; --hexspark:#16a34a;
  }
}

/* ── Mono promotion ─────────────────────────────────────────────────────────── */
html.skin-argent body,
html.skin-argent input, html.skin-argent textarea, html.skin-argent select,
html.skin-argent button {
  font-family:var(--ui-font);
}
/* wordmark goes mono (Cal Sans retired in-app per DESIGN-ui-redesign §6), regular weight */
html.skin-argent .logo,
html.skin-argent .hero-logo {
  font-family:var(--ui-font); font-weight:400; letter-spacing:.5px;
}
/* chat hero headline regular too (not bold) */
html.skin-argent .hero-title { font-weight:400; }

/* ── Brand: the lucide hexagon (Argent only) ────────────────────────────────── */
/* Drawn as a mask so it inherits the text colour and theme. The hexagon is the
 * outline-only lucide "hexagon"; fill:none means only the stroke masks through. */
html.skin-argent .logo::before {
  content:""; display:inline-block;
  width:.95em; height:.95em; margin-right:.34em; vertical-align:-.13em;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* chat hero: the big "dLLM" text is replaced by the lucide hexagon (soft, rounded
   corners — one path, so the joins stay smooth) with a bright blue charge that
   travels clockwise around the ring via a moving dash. The text is hidden
   (font-size:0); the inline <svg class="hex-circuit"> is rendered in chat.html. */
html.skin-argent .hero-logo { font-size:0; line-height:0; }
html.skin-argent .hex-circuit { width:3.3rem; height:3.3rem; display:inline-block; overflow:visible; }
html.skin-argent .hex-base {
  fill:none; stroke:var(--silver); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
/* the travelling blue arc — same path, normalized to pathLength=100, a ~24-unit
   lit segment chasing around the 100-unit perimeter. Glows for contrast. */
html.skin-argent .hex-spark {
  fill:none; stroke:var(--hexspark); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:24 76;
  animation:hexspark 2.1s linear infinite;
}
@keyframes hexspark { from { stroke-dashoffset:0; } to { stroke-dashoffset:100; } }
@media (prefers-reduced-motion: reduce){
  html.skin-argent .hex-spark { animation:none; opacity:0; }
}

/* ── Essential overrides the token swap can't express ───────────────────────── */
/* no gradients, anywhere */
html.skin-argent * { background-image:none; }
/* bordered buttons (the white inverted affordance is gone) */
html.skin-argent button,
html.skin-argent .btn {
  border:1px solid var(--border2); border-radius:6px;
}
html.skin-argent button:hover { border-color:var(--silver); }

/* ── Argent primitives (scaffold — pages adopt these in Phase 1) ─────────────── */
/* Canonical source: design/mockups/{stage-console,chat-receipts}.html. */
html.skin-argent .ag-panel {
  background:var(--panel); border:1px solid var(--border); border-radius:7px; padding:14px 15px;
}
html.skin-argent .ag-panel.alt { background:var(--panel2); }
html.skin-argent .ag-label {
  color:var(--muted); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
  display:flex; align-items:center; gap:6px; margin-bottom:10px;
}
html.skin-argent .ag-kv {
  display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed var(--hair);
}
html.skin-argent .ag-kv b { color:var(--silver); font-weight:500; }
html.skin-argent .ag-chip {
  border:1px solid var(--border2); border-radius:5px; padding:3px 8px; color:var(--silver);
  font-size:11px; display:inline-flex; align-items:center; gap:6px; background:var(--panel);
}
html.skin-argent .ag-chip.verify { border-color:#33433c; color:var(--verify); }
html.skin-argent .ag-seg {
  display:flex; border:1px solid var(--border2); border-radius:6px; overflow:hidden;
}
html.skin-argent .ag-seg button {
  flex:1; background:transparent; border:0; color:var(--muted); font-size:11px; padding:6px 0; cursor:pointer;
}
html.skin-argent .ag-seg button.sel { background:#15171a; color:var(--text); }