/* ==========================================================================
   ADREC AR — shared.css
   "Aetheris HUD" design tokens + primitives, shared across web/ pages.
   Namespaced with `adrec-` so any page can import this without collisions.
   Source: Designs/stitch_adrec_holographic_report_assistant/aetheris_hud/DESIGN.md
   ========================================================================== */

@import url('vendor/fonts/fonts.css');

:root{
  /* ---- Deep-space base ---------------------------------------------- */
  --adrec-bg:#05060d;                 /* Level 0 — deep space canvas */
  --adrec-bg-glow:#0b1226;            /* atmosphere radial glow */
  --adrec-surface:#12131b;
  --adrec-surface-dim:#0c0e16;
  --adrec-surface-bright:#383942;
  --adrec-surface-container-lowest:#0c0e16;
  --adrec-surface-container-low:#1a1b23;
  --adrec-surface-container:#1e1f27;
  --adrec-surface-container-high:#282932;
  --adrec-surface-container-highest:#33343d;

  /* ---- Text ------------------------------------------------------------ */
  --adrec-on-surface:#f2f6ff;         /* near-white, high-contrast */
  --adrec-on-surface-variant:#aeb6cc; /* muted blue-grey (metadata/labels) */
  --adrec-dim:#6b7699;                /* dimmest labels/footers */
  --adrec-outline:#859396;
  --adrec-outline-variant:#3b494c;

  /* ---- Accents ----------------------------------------------------- */
  --adrec-cyan:#34e7ff;               /* electric cyan — primary accent */
  --adrec-cyan-dim:#10daf2;           /* surface-tint / secondary cyan */
  --adrec-cyan-pale:#ccf7ff;          /* near-white cyan (on-dark text) */
  --adrec-on-cyan:#00363d;            /* dark text on cyan fills */
  --adrec-violet:#9b6cff;             /* secondary / premium accent */
  --adrec-violet-container:#561bb8;
  --adrec-on-violet:#3d008f;
  --adrec-mint:#b4ffdd;               /* live / success / positive delta */
  --adrec-mint-container:#4eecb6;
  --adrec-error:#ffb4ab;
  --adrec-error-container:#93000a;

  /* glass hairline + fills, matched to the prototype's rgba language */
  --adrec-line:rgba(120,150,220,.16);
  --adrec-line-strong:rgba(120,150,220,.30);
  --adrec-glass-fill:linear-gradient(180deg,rgba(18,26,52,.50),rgba(10,14,30,.34));
  --adrec-glass-fill-flat:rgba(8,12,24,.55);

  /* ---- Type ------------------------------------------------------------ */
  --adrec-font-display:'Space Grotesk','Inter',-apple-system,sans-serif;
  --adrec-font-body:'Inter',-apple-system,sans-serif;

  /* ---- Shape ------------------------------------------------------- */
  --adrec-radius-card:22px;           /* primary glass-container radius */
  --adrec-radius-control:14px;        /* nested/inner controls */
  --adrec-radius-full:9999px;

  /* ---- Spacing (8px rhythm) ------------------------------------------ */
  --adrec-space-container:20px;
  --adrec-space-stack:16px;
  --adrec-space-inner:24px;
  --adrec-space-glass-margin:12px;

  /* ---- Motion ------------------------------------------------------ */
  --adrec-ease:cubic-bezier(0.4,0,0.2,1);
}

/* ==========================================================================
   Base
   ========================================================================== */
.adrec-reset,
.adrec-reset *{box-sizing:border-box}

.adrec-body{
  background:radial-gradient(130% 85% at 50% -8%,var(--adrec-bg-glow),var(--adrec-bg) 60%);
  color:var(--adrec-on-surface);
  font-family:var(--adrec-font-body);
}

/* ==========================================================================
   Typography utilities (Aetheris type scale)
   ========================================================================== */
.adrec-display-hero{font-family:var(--adrec-font-display);font-size:48px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.adrec-headline-lg{font-family:var(--adrec-font-display);font-size:32px;font-weight:600;line-height:1.2}
.adrec-headline-md{font-family:var(--adrec-font-display);font-size:24px;font-weight:500;line-height:1.3}
.adrec-body-lg{font-family:var(--adrec-font-body);font-size:18px;font-weight:400;line-height:1.6}
.adrec-body-md{font-family:var(--adrec-font-body);font-size:16px;font-weight:400;line-height:1.5}
.adrec-label-caps{font-family:var(--adrec-font-display);font-size:12px;font-weight:700;line-height:1;letter-spacing:.1em;text-transform:uppercase}
.adrec-label-sm{font-family:var(--adrec-font-body);font-size:12px;font-weight:500;line-height:1.4}

/* ==========================================================================
   Glass card — Level 1 elevation
   ========================================================================== */
.adrec-glass{
  position:relative;
  background:var(--adrec-glass-fill);
  border:1px solid var(--adrec-line);
  border-radius:var(--adrec-radius-card);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:var(--adrec-space-inner);
  overflow:hidden;
}
/* light catching the top edge of the glass */
.adrec-glass::before{
  content:'';
  position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  pointer-events:none;
}
.adrec-glass-flat{
  background:var(--adrec-glass-fill-flat);
  border:1px solid var(--adrec-line);
  border-radius:var(--adrec-radius-card);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* ==========================================================================
   HUD buttons
   ========================================================================== */
.adrec-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--adrec-font-display);font-size:15px;font-weight:600;
  border-radius:var(--adrec-radius-control);
  border:1px solid transparent;
  padding:14px 22px;
  cursor:pointer;
  transition:transform .2s var(--adrec-ease),box-shadow .2s var(--adrec-ease),border-color .2s var(--adrec-ease),background-color .2s var(--adrec-ease);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.adrec-btn:active{transform:scale(.97)}
.adrec-btn-primary{
  background:var(--adrec-cyan);
  color:var(--adrec-on-cyan);
  box-shadow:0 0 22px rgba(52,231,255,.35);
}
.adrec-btn-primary:hover{box-shadow:0 0 30px rgba(52,231,255,.5)}
.adrec-btn-secondary{
  background:rgba(30,31,39,.4);
  color:var(--adrec-on-surface);
  border-color:var(--adrec-line-strong);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.adrec-btn-secondary:hover{border-color:rgba(52,231,255,.5)}
.adrec-btn-ghost{
  background:rgba(30,31,39,.35);
  color:var(--adrec-on-surface);
  border-color:var(--adrec-line);
  width:42px;height:42px;padding:0;border-radius:var(--adrec-radius-full);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* ==========================================================================
   Status dot + pill
   ========================================================================== */
.adrec-status-dot{
  position:relative;width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--adrec-cyan);box-shadow:0 0 8px var(--adrec-cyan);
}
.adrec-status-dot::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  background:inherit;opacity:.45;
  animation:adrec-ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
.adrec-status-dot.adrec-mint{background:var(--adrec-mint);box-shadow:0 0 8px var(--adrec-mint)}
.adrec-status-dot.adrec-violet{background:var(--adrec-violet);box-shadow:0 0 8px var(--adrec-violet)}
.adrec-status-dot.adrec-error{background:var(--adrec-error);box-shadow:0 0 8px var(--adrec-error)}

.adrec-pill{
  display:inline-flex;align-items:center;gap:9px;
  border-radius:var(--adrec-radius-full);
  padding:9px 18px;
  background:rgba(52,231,255,.14);
  border:1px solid rgba(52,231,255,.5);
  color:#dff6ff;
  font-family:var(--adrec-font-display);
  font-size:12px;letter-spacing:.12em;font-weight:600;text-transform:uppercase;
}

@keyframes adrec-ping{
  0%{transform:scale(1);opacity:.5}
  75%,100%{transform:scale(2.2);opacity:0}
}
@keyframes adrec-spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .adrec-status-dot::after{animation:none}
  *{scroll-behavior:auto !important}
}