/* ============================================================
   css_tokens.html — Quytech Theme (see Quytech-Theme.md).
   Do not invent colours; add a token instead.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  /* brand */
  --blue:#C8102E; --blue-mid:#A80F27; --blue-deep:#8F0F24;
  --blue-tint:#FBEAEC; --blue-tint2:#F7DCE0; --blue-border:#F0C2CA;

  /* ink + surfaces */
  --ink:#1C2128; --navy:#1E2430;
  --slate600:#4A525E; --slate500:#5B6472; --slate400:#8B93A0;
  --border:#E3E6EA; --divider:#EEF0F2;
  --surface:#FFFFFF; --app-bg:#F5F6F8;
  --thead:#F7F8FA; --row-hover:#FAFAFB;

  /* semantic */
  --ok:#1C8A55; --ok-tint:#E7F5EE; --ok-dark:#146B43;
  --warn:#F59E0B; --warn-dark:#B45309; --warn-tint:#FBF1E0; --warn-tint2:#FEF3E2;
  --danger:#DC2626; --danger-dark:#B91C1C; --danger-tint:#FBE9E9; --danger-border:#F3C9C9;
  --orange:#F5821F; --purple:#7C3AED; --purple-tint:#F3EEFF;
  --teal:#0891B2; --indigo:#6366F1;

  /* type */
  --ui:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --heading:'Manrope',var(--ui);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* table type scale — every table (table.t, .ru-tbl, .tscal) uses only these two sizes */
  --fs-th:11px; --fs-td:12px;

  /* geometry */
  --h-form:36px; --h-toolbar:34px; --h-filter:32px; --h-filter-sm:30px; --h-row-act:28px;
  /* control type scale — buttons, tabs, chips, inputs and selects all use these */
  --fs-ctl:12px; --fs-ctl-sm:11px;
  --r-input:10px; --r-toolbar:11px; --r-card:16px; --r-card-lg:18px;
  --r-modal:18px; --r-chip:20px; --r-pill:99px;

  --sh-card:0 1px 2px rgba(28,33,40,.04);
  --sh-card-hover:0 12px 28px rgba(28,33,40,.12);
  --sh-modal:0 30px 70px rgba(28,33,40,.4);
  --sh-primary:0 6px 16px rgba(200,16,46,.3);
  --overlay:rgba(28,33,40,.45);

  --rail:82px; --sidebar:248px; --topbar:66px; --pad:26px;
}

@keyframes qfade{from{opacity:0}to{opacity:1}}
@keyframes qpop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes qspin{to{transform:rotate(360deg)}}
@keyframes qslidein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}