/* Reset, typography, and form/button primitives. */

/* ------------------------------------------------------------------
   ASG CTO — the company's Bengali face, the same file the storefront
   serves (aparsclassroom-web, src/app/fonts/ASG_CTO.woff2). This file
   is loaded by all four front-ends — /admin, /affiliate, /shop and
   /docs all link it — so declaring it here reaches every surface at
   once. It is the face for ALL of them: both stacks in tokens.css
   (`--sans` and `--mono`) lead with it and nothing respells a font list.

   `unicode-range` is the whole design, and it is deliberate:

   - It scopes the face to the BENGALI BLOCK ONLY, which is what makes
     "lead with it everywhere" safe. It cannot draw a Latin letter, so
     English falls straight through to the stack behind it — the dense
     data screens (an order table, a chart axis, a permission badge) keep
     system-ui at 14px and read exactly as they did. Only the Bengali
     switches, which is the whole of what was asked for.
   - It also gates the DOWNLOAD. A browser fetches a unicode-range face
     only when the page actually paints a codepoint in that range, so
     /docs and the English-only dashboard views pay nothing for the
     94 KB, and a product list full of Bengali titles pays it once.

   There is no <link rel="preload"> for the same reason — preloading it
   would fetch the file on every page and throw that gating away.

   The font is Regular only, so bold Bengali is synthesised by the
   browser; and it carries the Bengali block plus ASCII and nothing else,
   which is why both stacks still end in a system family.
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'ASG CTO';
  src: url('../fonts/ASG_CTO.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Bengali block, plus the danda/rupee punctuation Bengali copy uses. */
  unicode-range: U+0964-0965, U+0980-09FF, U+200C-200D;
}

* { box-sizing: border-box; }
/* Screens are toggled via the hidden attribute; it must beat class display rules. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.5 var(--sans);
  background: var(--page);
  color: var(--ink);
}
.muted { color: var(--muted); }
a { color: var(--series); }

.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--grid); border-top-color: var(--series);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

input, select, textarea {
  font: inherit; color: var(--ink); background: var(--page);
  border: 1px solid var(--baseline); border-radius: 8px; padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--series); outline-offset: -1px; border-color: transparent; }

.btn {
  font: inherit; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--baseline); border-radius: 8px; padding: 8px 14px;
}
.btn:hover { border-color: var(--muted); }
.btn-primary { background: var(--series); border-color: var(--series); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--series); }
.btn-danger { border-color: var(--critical); color: var(--critical); }
.btn-block { width: 100%; }
.btn-sm { padding: 4px 10px; font-size: 12.5px; border-radius: 7px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.alert {
  background: color-mix(in srgb, var(--critical) 10%, var(--surface));
  border: 1px solid var(--critical); color: var(--ink);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px;
}