/* ============================================================
   Intelgic — central theme tokens
   Single source of truth for brand colors & accents.
   Every page links this BEFORE its own <style>, and uses
   var(--token) instead of hardcoded hex, so the whole app
   can be re-skinned from this one file.
   ============================================================ */
:root{
  /* Brand */
  --brand:#0d5c63;        /* primary teal */
  --brand2:#0a4a50;       /* deep teal */
  --blue:#1e65a3;         /* accent blue */
  --blue2:#185a92;

  /* Tints / fills */
  --accent:#e8f3f3;       /* light teal fill */
  --accent2:#f2faf9;      /* lightest teal */
  --bluebg:#eaf1f8;       /* light blue fill */

  /* Ink / text */
  --ink:#15202b;
  --ink2:#4a5764;
  --ink3:#7a8694;

  /* Surfaces / lines */
  --surface:#ffffff;
  --line:#e6eaee;
  --bg:#eef2f4;           /* flat page / control fill */

  /* Status */
  --good:#0d7a4d;
  --internal:#8a4b00;
  --danger:#a8321f;

  /* Reusables */
  --grad-brand:linear-gradient(135deg, var(--brand), var(--brand2));
  --shadow:0 1px 3px rgba(20,40,60,.06), 0 8px 22px rgba(20,40,60,.06);

  /* The soft welcome/landing backdrop — use as `background: var(--page-bg)` */
  --page-bg:
    radial-gradient(1100px 520px at 50% -8%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 88% 8%, rgba(30,101,163,.06) 0%, rgba(30,101,163,0) 55%),
    radial-gradient(900px 600px at 8% 96%, rgba(13,92,99,.07) 0%, rgba(13,92,99,0) 55%),
    linear-gradient(170deg,#f7fafb 0%,#eef5f6 100%);
}

/* ============================================================
   App "scene" — the premium teal backdrop shared by the start
   pages (login, landing). Set `body{background:var(--scene-bg)}`
   and drop in <div class="scene-aurora">…blobs…</div> +
   <div class="scene-grid"></div>. One source for the whole look.
   ============================================================ */
:root{
  --scene-bg:
    radial-gradient(130% 120% at 50% -10%, transparent 55%, rgba(0,0,0,.22) 100%),
    radial-gradient(900px 520px at 80% 0%, rgba(30,101,163,.42), transparent 60%),
    radial-gradient(900px 560px at 8% 100%, rgba(8,60,68,.55), transparent 60%),
    linear-gradient(160deg, var(--brand) 0%, var(--brand2) 100%);
}
.scene-aurora{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.scene-aurora .blob{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;will-change:transform}
.scene-aurora .b1{width:560px;height:560px;top:-160px;left:-120px;opacity:.40;background:radial-gradient(circle, rgba(46,150,170,.9), transparent 70%);animation:scenedrift1 30s ease-in-out infinite alternate}
.scene-aurora .b2{width:620px;height:620px;bottom:-200px;right:-140px;opacity:.34;background:radial-gradient(circle, rgba(30,101,163,.9), transparent 70%);animation:scenedrift2 38s ease-in-out infinite alternate}
.scene-aurora .b3{width:460px;height:460px;top:38%;left:48%;opacity:.20;background:radial-gradient(circle, rgba(150,220,210,.9), transparent 70%);animation:scenedrift3 34s ease-in-out infinite alternate}
@keyframes scenedrift1{from{transform:translate(0,0) scale(1)}to{transform:translate(90px,70px) scale(1.18)}}
@keyframes scenedrift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-80px,-60px) scale(1.12)}}
@keyframes scenedrift3{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-44%,-56%) scale(1.22)}}
.scene-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 42%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 90% at 50% 42%, #000 0%, transparent 72%);
  animation:scenegridpan 42s linear infinite}
@keyframes scenegridpan{from{background-position:0 0}to{background-position:46px 46px}}
@media (prefers-reduced-motion: reduce){.scene-aurora .blob,.scene-grid{animation:none}}