/* iSnan web tokens — identity from viavitacare.com, calm product UI.
   Shared by /download, /auth, /app/open and /admin. Do not edit per page; extend locally. */

@font-face { font-family: "Thmanyah Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("./fonts/thmanyahsans-Light.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("./fonts/thmanyahsans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("./fonts/thmanyahsans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("./fonts/thmanyahsans-Bold.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Sans"; font-weight: 900; font-style: normal; font-display: swap; src: url("./fonts/thmanyahsans-Black.woff2") format("woff2"); }

:root {
  /* brand */
  --blue: #1D4ED8;
  --blue-d: #1A45C2;
  --blue-soft: #EBF0FE;
  --teal: #14B8A6;
  --teal-soft: #E7F8F5;
  --green: #22C55E;
  --green-ink: #15803D;
  --green-soft: #EAF9F0;
  /* neutrals */
  --ink: #0B1020;
  --ink-2: #1A2236;
  --slate: #5B6478;
  --mist: #8B93A7;
  --cloud: #F6F8FB;
  --paper: #FFFFFF;
  --line: #E7EBF3;
  --line-2: #D9DFEC;
  /* functional (not in the marketing site; chosen to sit quietly beside the brand) */
  --amber: #B45309;
  --amber-soft: #FEF6E7;
  --red: #C2410C;
  --red-strong: #DC2626;
  --red-soft: #FDF0EC;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-1: 0 1px 2px rgba(11, 16, 32, .04), 0 1px 1px rgba(11, 16, 32, .03);
  --shadow-2: 0 8px 24px -12px rgba(11, 16, 32, .18);
  --focus: 0 0 0 3px rgba(29, 78, 216, .22);

  --font: "Thmanyah Sans", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

/* Latin digits inside RTL text */
.num, .en { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; }
.ic.sm { width: 16px; height: 16px; }
.ic.lg { width: 24px; height: 24px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--radius);
  font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; background: var(--paper);
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-d); }
.btn.secondary { border-color: var(--line-2); color: var(--ink); }
.btn.secondary:hover { border-color: var(--mist); }
.btn.ghost { color: var(--slate); }
.btn.ghost:hover { background: var(--cloud); color: var(--ink); }
.btn.danger { color: var(--red-strong); border-color: #F3C9C2; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* status pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--cloud); color: var(--slate);
}
.pill.blue { background: var(--blue-soft); color: var(--blue); }
.pill.green { background: var(--green-soft); color: var(--green-ink); }
.pill.teal { background: var(--teal-soft); color: #0F766E; }
.pill.amber { background: var(--amber-soft); color: var(--amber); }
.pill.red { background: var(--red-soft); color: var(--red); }

/* surfaces */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.muted { color: var(--slate); }
.subtle { color: var(--mist); }

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