/* ChronitonAI/design components/bundle.css: the rules for the base, labels, the logo, buttons and tags. */
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 24px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--selection); color: var(--ink); }
.label { text-transform: uppercase; }
code, kbd, samp, pre, .code, .data, .label, .chr-tag, .chr-btn { font-variant-ligatures: none !important; }
.chr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chr-glyph, .chr-lockup { display: inline-block; vertical-align: middle; flex: none; }
.chr-tone-brand { color: var(--signal-ink); }
.chr-tone-ink { color: var(--ink); }
.chr-tone-on-signal { color: var(--on-signal); }
.chr-lockup--brand .chr-lk-glyph, .chr-lockup--brand .chr-lk-ai { color: var(--signal-ink); }
.chr-lockup--brand .chr-lk-word { color: var(--ink); }
.chr-lockup--brand .chr-lk-tag { color: var(--ink-muted); }
.chr-qed { display: inline-block; vertical-align: baseline; margin-left: 0.3em; color: var(--signal-ink); }
.chr-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; height: var(--control-md); padding: 0 var(--space-4); border: var(--hairline) solid transparent; border-radius: var(--radius-0); background: transparent; color: var(--ink); font: 500 13px/1 var(--font-mono); letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.chr-btn--sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: 12px; }
.chr-btn--lg { height: var(--control-lg); padding: 0 var(--space-5); font-size: 14px; }
.chr-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chr-btn--primary:hover { box-shadow: inset 0 0 0 2px var(--on-primary); }
.chr-btn--secondary { border-color: var(--line-strong); }
.chr-btn--secondary:hover { background: var(--surface-hover); border-color: var(--ink-muted); }
.chr-btn--quiet:hover { background: var(--surface-hover); }
.chr-btn--danger { border-color: var(--danger); color: var(--danger); }
.chr-btn--danger:hover { background: var(--danger-soft); }
.chr-btn:active:not(:disabled) { transform: translateY(1px); }
.chr-btn:disabled { cursor: not-allowed; background: transparent; color: var(--ink-muted); border-color: var(--line-strong); border-style: dashed; box-shadow: none; }
.chr-btn-icon { display: inline-flex; width: 1.2em; height: 1.2em; }
.chr-btn-icon svg { width: 100%; height: 100%; }
.chr-tag { display: inline-flex; align-items: center; box-sizing: border-box; height: 20px; padding: 0 6px 0 calc(6px + 0.1em); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-0); font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; vertical-align: middle; }
.chr-tag--signal { border-color: var(--signal-ink); color: var(--signal-ink); }
.chr-tag--solid { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
@media (prefers-reduced-motion: reduce) {
  .chr-btn { transition: none; }
}