/* Argent — liquid-metal UI. One stylesheet, themeable via CSS variables. */

.argent {
  position: relative;
  isolation: isolate;
  display: inline-block;
  color: var(--argent-text);
  border: 1px solid var(--argent-edge);
  box-shadow: var(--argent-shadow);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Finishes ─────────────────────────────────────────────────────────── */
.argent[data-tone="silver"], [data-tone="silver"] {
  --argent-grad: linear-gradient(135deg, #ffffff 0%, #dfe3e8 15%, #a6acb5 35%, #34383e 50%, #b4bac2 64%, #eef1f4 82%, #ffffff 100%);
  --argent-text: #1a1c20;
  --argent-edge: rgba(255, 255, 255, 0.7);
  --argent-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(0, 0, 0, 0.22);
  --argent-sheen: rgba(255, 255, 255, 0.85);
  --argent-label-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.argent[data-tone="gold"], [data-tone="gold"] {
  --argent-grad: linear-gradient(135deg, #fff7d6 0%, #ffe08a 20%, #e3a812 44%, #7c5f12 52%, #e6c24e 68%, #ffe08a 86%, #fff7d6 100%);
  --argent-text: #3a2c05;
  --argent-edge: rgba(255, 240, 200, 0.7);
  --argent-shadow: 0 10px 30px rgba(60, 40, 0, 0.4), inset 0 1px 0 rgba(255, 248, 220, 0.9), inset 0 -2px 3px rgba(70, 50, 0, 0.3);
  --argent-sheen: rgba(255, 250, 220, 0.85);
  --argent-label-shadow: 0 1px 0 rgba(255, 245, 200, 0.5);
}
.argent[data-tone="gunmetal"], [data-tone="gunmetal"] {
  --argent-grad: linear-gradient(135deg, #9aa0aa 0%, #6b7079 18%, #2c2f36 46%, #16181c 54%, #3a3e46 70%, #7a808a 90%, #aab0ba 100%);
  --argent-text: #f0f2f5;
  --argent-edge: rgba(255, 255, 255, 0.16);
  --argent-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 3px rgba(0, 0, 0, 0.5);
  --argent-sheen: rgba(255, 255, 255, 0.55);
  --argent-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.argent[data-tone="obsidian"], [data-tone="obsidian"] {
  --argent-grad: linear-gradient(135deg, #4a4e56 0%, #2a2d33 20%, #0b0c0f 48%, #000000 56%, #23262c 72%, #44484f 92%, #5a5f68 100%);
  --argent-text: #eef0f3;
  --argent-edge: rgba(255, 255, 255, 0.12);
  --argent-shadow: 0 14px 36px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.6);
  --argent-sheen: rgba(200, 210, 255, 0.5);
  --argent-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.argent[data-tone="cobalt"], [data-tone="cobalt"] {
  --argent-grad: linear-gradient(135deg, #eef4ff 0%, #a7c0f2 16%, #4a66b4 38%, #1b2a5e 52%, #5e7bce 66%, #bcd0f7 84%, #eef4ff 100%);
  --argent-text: #0b1430;
  --argent-edge: rgba(210, 226, 255, 0.7);
  --argent-shadow: 0 10px 30px rgba(10, 20, 60, 0.45), inset 0 1px 0 rgba(235, 244, 255, 0.9), inset 0 -2px 3px rgba(8, 16, 50, 0.35);
  --argent-sheen: rgba(220, 234, 255, 0.85);
  --argent-label-shadow: 0 1px 0 rgba(225, 238, 255, 0.5);
}
.argent[data-tone="crimson"], [data-tone="crimson"] {
  --argent-grad: linear-gradient(135deg, #ffeef0 0%, #f2a8b0 16%, #b83e48 38%, #5e161e 52%, #ce5a64 66%, #f7bcc2 84%, #ffeef0 100%);
  --argent-text: #2e0a0e;
  --argent-edge: rgba(255, 220, 224, 0.7);
  --argent-shadow: 0 10px 30px rgba(60, 10, 16, 0.45), inset 0 1px 0 rgba(255, 235, 238, 0.9), inset 0 -2px 3px rgba(50, 8, 12, 0.35);
  --argent-sheen: rgba(255, 224, 228, 0.85);
  --argent-label-shadow: 0 1px 0 rgba(255, 228, 230, 0.5);
}
.argent[data-tone="amethyst"], [data-tone="amethyst"] {
  --argent-grad: linear-gradient(135deg, #f6eeff 0%, #c8a8f2 16%, #7a4ab8 38%, #3a1c6e 52%, #9466ce 66%, #d8bcf7 84%, #f6eeff 100%);
  --argent-text: #1c0e38;
  --argent-edge: rgba(232, 214, 255, 0.7);
  --argent-shadow: 0 10px 30px rgba(30, 12, 60, 0.45), inset 0 1px 0 rgba(244, 235, 255, 0.9), inset 0 -2px 3px rgba(24, 10, 50, 0.35);
  --argent-sheen: rgba(236, 220, 255, 0.85);
  --argent-label-shadow: 0 1px 0 rgba(238, 226, 255, 0.5);
}
.argent[data-tone="emerald"], [data-tone="emerald"] {
  --argent-grad: linear-gradient(135deg, #eafff4 0%, #92e0b6 16%, #2f9468 38%, #134e38 52%, #4ec88c 66%, #b8f5d4 84%, #eafff4 100%);
  --argent-text: #08281c;
  --argent-edge: rgba(206, 255, 226, 0.7);
  --argent-shadow: 0 10px 30px rgba(8, 40, 28, 0.45), inset 0 1px 0 rgba(232, 255, 244, 0.9), inset 0 -2px 3px rgba(6, 32, 22, 0.35);
  --argent-sheen: rgba(220, 255, 236, 0.85);
  --argent-label-shadow: 0 1px 0 rgba(226, 255, 240, 0.5);
}

/* ── The flowing metal fill (Paper LiquidMetal shader canvas) ─────────── */
.argent-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  background: var(--argent-grad); /* shown until the shader canvas mounts */
}
.argent-fill canvas { display: block; width: 100% !important; height: 100% !important; }

/* Border variant: a panel covers the centre, leaving the metal as an edge.
   --argent-panel is the interior colour; theme it to your surface. */
.argent-core {
  position: absolute;
  inset: var(--argent-bw, 1.5px);
  z-index: 1;
  border-radius: inherit;
  background: var(--argent-panel, #0d0e11);
  transition: opacity 0.4s ease;
}
.argent--reveal:hover .argent-core { opacity: 0; }

/* In border mode the metal ring is the border, and content sits on the panel. */
.argent--border { border-color: transparent; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32); }
.argent--border > .argent-content { color: var(--argent-panel-text, #f1f2f4); }

/* Tint: let the metal show faintly through the interior panel. */
.argent--tint .argent-core {
  background: color-mix(in srgb, var(--argent-panel, #0d0e11) 70%, transparent);
  backdrop-filter: saturate(120%) brightness(0.7);
  -webkit-backdrop-filter: saturate(120%) brightness(0.7);
}

/* Double frame: an inner hairline frame inset from the metal rim, with a gap. */
.argent--double .argent-core::after {
  content: "";
  position: absolute;
  inset: var(--argent-gap, 5px);
  z-index: 2;
  border-radius: inherit;
  border: 1px solid var(--argent-edge, rgba(255, 255, 255, 0.5));
  opacity: 0.7;
  pointer-events: none;
}

/* ── Halo: frosted standoff ring outside the metal ───────────────────── */
.argent--halo::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--argent-halo, 8px));
  z-index: -1;
  border-radius: calc(var(--argent-radius, 14px) + var(--argent-halo, 8px));
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--argent-halo-line, rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

/* ── Specular sheen sweep ─────────────────────────────────────────────── */
.argent-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 36%, var(--argent-sheen) 50%, transparent 64%);
  background-size: 260% 100%;
  background-position: -60% 0;
  background-repeat: no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
  transition: background-position 0.6s ease, opacity 0.3s ease;
}
.argent--sheen:hover .argent-sheen { background-position: 160% 0; opacity: 0.95; }

/* ── Content sits above the metal ─────────────────────────────────────── */
.argent-content { position: relative; z-index: 2; display: block; }

@media (prefers-reduced-motion: reduce) {
  .argent-fill { animation: none; }
  .argent-sheen { transition: opacity 0.2s ease; }
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.argent-card { display: block; }
.argent-card > .argent-content { padding: 20px; }

/* ── Button ───────────────────────────────────────────────────────────── */
.argent-btn {
  display: inline-flex;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.14s cubic-bezier(0.34, 1.5, 0.5, 1), box-shadow 0.2s ease, filter 0.15s ease;
}
.argent-btn > .argent-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
/* Border button: light label on the dark pill. */
.argent-btn.argent--border > .argent-content {
  color: var(--argent-panel-text, #f1f2f4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
/* Fill button: white label with a layered dark halo so it reads over any band. */
.argent-btn.argent--fill > .argent-content {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.65);
}
.argent-btn--sm > .argent-content { padding: 8px 16px; font-size: 13px; }
.argent-btn--md > .argent-content { padding: 11px 22px; font-size: 14px; }
.argent-btn--lg > .argent-content { padding: 14px 28px; font-size: 16px; }
.argent-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.argent-btn:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: var(--argent-shadow), inset 0 3px 7px rgba(0, 0, 0, 0.42);
}
.argent-btn:focus-visible { outline: 2px solid var(--argent-edge); outline-offset: 2px; }

/* ── Chrome text ──────────────────────────────────────────────────────── */
.argent-text {
  --argent-text-grad: linear-gradient(135deg, #ffffff 0%, #cdd2da 22%, #7e858f 42%, #3a3e44 50%, #aab0b9 60%, #f0f2f5 80%, #ffffff 100%);
  background: var(--argent-text-grad);
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.argent-text[data-tone="gold"] {
  --argent-text-grad: linear-gradient(135deg, #fff7d6 0%, #ffdf85 20%, #e0a912 42%, #8a6a10 50%, #e8c54e 62%, #ffe9a4 82%, #fff7d6 100%);
}
.argent-text[data-tone="gunmetal"] {
  --argent-text-grad: linear-gradient(135deg, #c6ccd6 0%, #8a9098 22%, #3a3e46 46%, #21242a 54%, #585d66 68%, #a8aeb8 86%, #ccd2dc 100%);
}
.argent-text[data-tone="obsidian"] {
  --argent-text-grad: linear-gradient(135deg, #9a9ca8 0%, #54565e 25%, #17181c 48%, #060608 56%, #3c3e46 72%, #84868f 92%, #a8aab4 100%);
}
.argent-text[data-tone="cobalt"] {
  --argent-text-grad: linear-gradient(135deg, #eef4ff 0%, #a7c0f2 22%, #4a66b4 46%, #1b2a5e 54%, #5e7bce 70%, #bcd0f7 88%, #eef4ff 100%);
}
.argent-text[data-tone="crimson"] {
  --argent-text-grad: linear-gradient(135deg, #ffeef0 0%, #f2a8b0 22%, #b83e48 46%, #5e161e 54%, #ce5a64 70%, #f7bcc2 88%, #ffeef0 100%);
}
.argent-text[data-tone="amethyst"] {
  --argent-text-grad: linear-gradient(135deg, #f6eeff 0%, #c8a8f2 22%, #7a4ab8 46%, #3a1c6e 54%, #9466ce 70%, #d8bcf7 88%, #f6eeff 100%);
}
.argent-text[data-tone="emerald"] {
  --argent-text-grad: linear-gradient(135deg, #eafff4 0%, #92e0b6 22%, #2f9468 46%, #134e38 54%, #4ec88c 70%, #b8f5d4 88%, #eafff4 100%);
}
.argent-text--shimmer { animation: argent-shimmer 7s linear infinite; }
@keyframes argent-shimmer {
  to { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .argent-text--shimmer { animation: none; }
}

/* ── Metal icons ──────────────────────────────────────────────────────── */
.argent-icon-wrap { vertical-align: middle; line-height: 0; position: relative; }

/* button icon sits in the label, inheriting the label colour */
.argent-btn-icon { display: inline-flex; align-items: center; }
.argent-btn-icon svg { width: 1.05em; height: 1.05em; display: block; }

/* ── Toggle (mercury switch) ──────────────────────────────────────────── */
.argent-toggle {
  position: relative;
  width: 50px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--argent-panel, #0d0e11);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* the channel floods with the tone's metal when on — unmistakable state */
.argent-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--argent-grad);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.argent-toggle[data-checked]::before { opacity: 0.45; }
.argent-toggle:hover { border-color: rgba(255, 255, 255, 0.28); }
.argent-toggle[data-checked] {
  border-color: var(--argent-edge, rgba(255, 255, 255, 0.5));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55), 0 0 14px -4px var(--argent-sheen, rgba(255, 255, 255, 0.5));
}
.argent-toggle-thumb {
  z-index: 1;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  transform: translateX(0);
  transition: transform 0.26s cubic-bezier(0.34, 1.45, 0.55, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  background: var(--argent-grad);
}
.argent-toggle[data-checked] .argent-toggle-thumb { transform: translateX(22px); }
/* mercury squish while pressed */
.argent-toggle:active .argent-toggle-thumb { transform: translateX(0) scale(1.12, 0.9); }
.argent-toggle[data-checked]:active .argent-toggle-thumb { transform: translateX(22px) scale(1.12, 0.9); }
.argent-toggle:focus-visible { outline: 2px solid var(--argent-edge, rgba(255, 255, 255, 0.5)); outline-offset: 2px; }
.argent-toggle:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Progress (molten bar) ────────────────────────────────────────────── */
.argent-progress {
  position: relative;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--argent-panel, #0d0e11);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.argent-progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  overflow: hidden;
  background: var(--argent-grad);
  transition: width 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.argent-progress--indeterminate .argent-progress-fill {
  width: 36%;
  animation: argent-sweep 1.5s ease-in-out infinite;
}
@keyframes argent-sweep {
  from { left: -36%; }
  to { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .argent-progress--indeterminate .argent-progress-fill { animation-duration: 3s; }
}

/* ── Badge ────────────────────────────────────────────────────────────── */
.argent-badge > .argent-content {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0.01em;
  white-space: nowrap;
}