/* TinkerTally Design System — global entry point.
   Consumers link THIS one file. */
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/effects.css";

*{box-sizing:border-box}
body{margin:0}

/* --- Button (mirrors design-system components/core/Button.jsx) --- */
.tt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:var(--font-sans);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-tight);
  line-height:1;
  border-radius:var(--radius-sm);
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast);
}
.tt-btn:disabled{cursor:not-allowed;opacity:.45}
.tt-btn--full{display:flex;width:100%}

.tt-btn--sm{padding:5px 10px;font-size:var(--text-xs);border-radius:var(--radius-sm);gap:5px}
.tt-btn--md{padding:8px 14px;font-size:var(--text-sm);border-radius:var(--radius-sm);gap:6px}
.tt-btn--lg{padding:10px 20px;font-size:var(--text-base);border-radius:var(--radius-md);gap:7px}

.tt-btn--primary{background:var(--color-primary);color:#fff;border:1px solid transparent}
.tt-btn--primary:hover:not(:disabled){background:var(--color-primary-hover)}
.tt-btn--secondary{background:var(--surface-card);color:var(--tt-navy-700);border:1px solid var(--border-default)}
.tt-btn--secondary:hover:not(:disabled){background:var(--surface-muted);border-color:var(--tt-blue-500)}

/* --- Modal (q-modal) ---
   The site's one branded in-page confirmation/editor dialog, used instead of
   a native confirm()/alert() so it reads as part of the product rather than
   an OS popup. Originated in workpaper-collation-app.html's Edit-Table-of-
   Contents modal; factored in here 04 Aug 2026 after being copy-pasted
   verbatim into admin-accounts.html (Delete Account) and
   client-firm-settings.html (Confirm plan change) — a third copy was the
   sign to stop duplicating it per page.
   Defaults below match the original, more general TOC-editor shape (wider
   card, space-between footer for a left-side "Restore Defaults"-style
   button). A narrower, single-action confirmation dialog (Delete Account,
   Confirm plan change) overrides both inline on that instance:
     <div class="q-card" style="width:min(460px,96vw)">
     <div class="q-foot" style="justify-content:flex-end;gap:8px">
   A destructive action also overrides the header's gradient inline, e.g.:
     <div class="q-hd" style="background:linear-gradient(90deg,#b3261e,#e03e3e)">
   Not yet using this file's own design tokens (var(--...)) — kept as the
   exact hardcoded values already shipped on both pages so hoisting this
   caused zero visual change; worth revisiting if the modal is restyled. */
.q-modal{position:fixed;inset:0;background:rgba(10,20,35,.62);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:1001;padding:20px}
.q-modal.show{display:flex}
.q-card{background:#fff;border-radius:14px;width:min(560px,96vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.34);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;color:#1a2030}
.q-hd{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:linear-gradient(90deg,#1878c0,#189cd8);color:#fff;flex-shrink:0}
.q-hd-title{font-size:14px;font-weight:700;letter-spacing:-.01em}
.q-close{width:28px;height:28px;border:none;border-radius:6px;background:rgba(255,255,255,.16);color:#fff;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.q-close:hover{background:rgba(255,80,80,.5)}
.q-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.q-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid #dde3ef;background:#f8fafd;flex-shrink:0}
.q-continue{padding:9px 18px;background:#189cd8;color:#fff;border:none;border-radius:8px;font-size:12.5px;font-weight:700;transition:background .15s;cursor:pointer}
.q-continue:hover:not(:disabled){background:#1878c0}
.q-continue:disabled{opacity:.45;cursor:not-allowed}
.btn-mini{padding:5px 10px;background:#eef2f8;border:1px solid #dde3ef;color:#1878c0;border-radius:5px;font-size:10.5px;font-weight:600;cursor:pointer}
.btn-mini:hover{background:#e2e9f4}
/* Danger variant for a destructive confirmation (revoking access, deleting
   something) — admin-accounts.html's Delete Account modal predates this and
   still sets the same look via an inline style + .tt-btn--danger; new q-modal
   instances should use these classes instead. */
.q-hd.is-danger{background:linear-gradient(90deg,#b3261e,#e03e3e)}
.q-continue.is-danger{background:#e03e3e}
.q-continue.is-danger:hover:not(:disabled){background:#b3261e}