/*
  Design tokens — Remote Support Portal (brand pass)

  Palette:
    --ink        #0B1220  near-black navy, body text / dark surfaces
    --paper      #F5F7FA  cool off-white background
    --signal     #EA5131  brand accent — the "connect" color
    --signal-ink #9F2910  darker brand shade, used for text-on-light and
                          the geometric background pattern
    --live       #1FAA6A  active/success green (kept neutral — don't reuse
                          the brand orange for status, or "active" and
                          "brand accent" become visually ambiguous)
    --alert      #D93B3B  expired/error red
    --line       #E2E6EE  hairline borders on light surfaces

  Type:
    Display / PIN digits : "Poppins" (semibold/bold) — brand face doubles as
                            the keypad face so the PIN reads as a headline
    Body                  : "Poppins" (regular/medium)
*/

:root {
  --ink: #0B1220;
  --paper: #F5F7FA;
  --signal: #EA5131;
  --signal-ink: #9F2910;
  --live: #1FAA6A;
  --alert: #D93B3B;
  --line: #E2E6EE;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

.font-mono-display {
  /* Poppins has no monospace variant, so the PIN readout uses tabular
     figures on the brand face instead of switching families. */
  font-family: 'Poppins', ui-sans-serif, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* PIN entry — six discrete cells wired together like a keypad readout */
.pin-input {
  font-family: 'Poppins', ui-sans-serif, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.75em;
  text-indent: 0.375em; /* re-center the caret within the letter-spacing */
  caret-color: var(--signal);
}

.pin-input::placeholder {
  color: #B9C2D4;
  letter-spacing: 0.75em;
}

.signal-underline {
  background-image: linear-gradient(90deg, var(--signal) 0%, #FF8A68 100%);
}

.dot-grid {
  background-image: radial-gradient(circle, #DCE3F0 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Geometric brand background — layered over --ink surfaces (e.g. the
   technician login screen). Darker-orange shapes on the near-black ink,
   very low opacity so it reads as texture, not noise. */
.geo-bg {
  background-color: var(--ink);
  background-image: url('/assets/img/bg-geometric.svg');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: min(900px, 90vw) auto;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.pulse-live {
  animation: pulse-live 2s ease-in-out infinite;
}