/* ================================================================
   Brains PWA — vendored tokens (B0)

   Vendored selectively from /Users/awvmeijer/Documents/Claude Code/
   3DREAMS-LiDAR-Dashboard-Full-Stack/app/globals.css. NOT a raw copy:
   - We don't use Tailwind / shadcn / HSL-triplet shape — kept brain's
     CSS-var system as the single source of truth.
   - We don't use Barlow Condensed / Inter / Share Tech Mono — type
     roles are mapped onto brain's Geist + Departure Mono + JetBrains
     stack (DESIGN.md type table is the contract).
   - Phosphor scale is preserved as opacity ramp tokens (live-signal
     nuance only — DESIGN.md hard rule 1).

   This file is loaded BEFORE style.css. Anything declared here can be
   overridden by component-specific rules later.
   ================================================================ */

:root {
  /* ---- Phosphor opacity ramp (live-signal nuance) -----------------
   * For multi-step pulses, glows, hover halos on live indicators.
   * Maps the LiDAR phosphor scale onto brain's #39FF14 — the rgb is
   * the same in both projects, but day-mode dims the base hue (see
   * style.css :root[data-theme="day"]). This ramp is night-mode tuned;
   * day-mode uses lower opacities globally via the parent --phosphor
   * already being a dimmer hue.
   */
  --phosphor-95: rgba(46, 230, 166, 0.95);
  --phosphor-90: rgba(46, 230, 166, 0.90);
  --phosphor-80: rgba(46, 230, 166, 0.80);
  --phosphor-70: rgba(46, 230, 166, 0.70);
  --phosphor-60: rgba(46, 230, 166, 0.60);
  --phosphor-45: rgba(46, 230, 166, 0.45);
  --phosphor-30: rgba(46, 230, 166, 0.30);
  --phosphor-20: rgba(46, 230, 166, 0.20);
  --phosphor-10: rgba(46, 230, 166, 0.10);
  --phosphor-05: rgba(46, 230, 166, 0.05);
}

/* Day-mode phosphor uses the dimmer #2bc910 hue (style.css already
   sets --phosphor for day). Re-emit the ramp at the dim hue so any
   consumer that reads a step token gets day-correct color. */
[data-theme="day"] {
  --phosphor-95: rgba(46, 230, 166, 0.95);
  --phosphor-90: rgba(46, 230, 166, 0.90);
  --phosphor-80: rgba(46, 230, 166, 0.80);
  --phosphor-70: rgba(46, 230, 166, 0.70);
  --phosphor-60: rgba(46, 230, 166, 0.60);
  --phosphor-45: rgba(46, 230, 166, 0.45);
  --phosphor-30: rgba(46, 230, 166, 0.30);
  --phosphor-20: rgba(46, 230, 166, 0.20);
  --phosphor-10: rgba(46, 230, 166, 0.10);
  --phosphor-05: rgba(46, 230, 166, 0.05);
}

/* ================================================================
   Glass card — shareable component class.
   Used by drawer + future cosmic-Intercom card surfaces (B1).
   Outer shadow stays subtle; the cosmic backdrop carries the depth.
   ================================================================ */
/* v3: flat panel, no blur/glass. Kept the class name (consumers depend on it). */
.card-glass {
  background-color: var(--bg-surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

[data-theme="day"] .card-glass {
  background-color: var(--bg-surface-2);
}

/* ================================================================
   Semantic type roles (vendored + remapped)

   LiDAR uses Inter/Barlow/Share Tech Mono. Brain uses Geist /
   Departure Mono / JetBrains Mono per DESIGN.md. The role NAMES are
   shared so future copy-paste between projects is mechanical.
   ================================================================ */

/* Page titles — heavy display. Used in section headers + persona strip. */
.type-page-title {
  font-family: var(--font-body);
  font-size: clamp(28px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--text-primary);
}

/* Section headers inside cards/views — Geist semi-bold mid scale. */
.type-section-header {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-primary);
}

/* Card / component labels — Departure Mono uppercase tracked.
   The eyebrow pattern from DESIGN.md, just available as a utility. */
.type-card-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Data / metric values — Departure Mono, tabular numerics.
   The "HUD numeric" role from DESIGN.md type table. */
.type-data-value {
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Small data values — for sensor readings, inline counts. */
.type-data-sm {
  font-family: var(--font-hud);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

/* Captions / helper text — Geist 14 light. */
.type-caption {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ================================================================
   HUD scan-line overlay (opt-in via data-attribute)
   For information-layer cards in the Brain Graph that want the
   dense-HUD feel — phosphor scan lines at low alpha. Off by default.
   Use: <div class="card-hud" data-hud="true">…</div>
   ================================================================ */
.card-hud[data-hud="true"] {
  position: relative;
}
.card-hud[data-hud="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    var(--phosphor-05) 0,
    var(--phosphor-05) 1px,
    transparent 1px,
    transparent 3px
  );
  border-radius: inherit;
  z-index: 1;
}
.card-hud[data-hud="true"] > * {
  position: relative;
  z-index: 2;
}

/* Day mode: scan-lines off (would shimmer badly on pearl background) */
[data-theme="day"] .card-hud[data-hud="true"]::before {
  display: none;
}

/* ================================================================
   Film-grain overlay (atmospheric texture, opt-in)
   Add <div class="grain-overlay"></div> as a top-level sibling of
   <main> to enable. Pure SVG noise via data URI — no asset fetch.
   ================================================================ */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

[data-theme="day"] .grain-overlay {
  /* Less grain on pearl — it reads as dust on a clean surface */
  opacity: 0.022;
}

/* ================================================================
   Card accent borders (dense-HUD detail)

   2px left bar in monochrome hairline tone. Used for kind/severity
   tagging on rows in the Brain Graph rail and dense list surfaces.
   Color overrides plug into specific kinds (.card-accent-agent { … }).
   ================================================================ */
.card-accent {
  border-left: 2px solid var(--hairline-strong);
}
.card-accent-violet { border-left-color: var(--violet); }
.card-accent-cyan   { border-left-color: var(--cyan); }
.card-accent-warn   { border-left-color: var(--warning); }
.card-accent-error  { border-left-color: var(--error); }
.card-accent-live   { border-left-color: var(--phosphor); }

/* ================================================================
   Accessibility — vendored from LiDAR dashboard

   Brain previously had no high-contrast media query. Adding both
   here so any new surface that consumes these tokens / classes
   inherits a11y posture without bespoke work.
   ================================================================ */
@media (prefers-contrast: high) {
  :root {
    --hairline: rgba(255, 255, 255, 0.18);
    --hairline-strong: rgba(255, 255, 255, 0.32);
  }
  [data-theme="day"] {
    --hairline: rgba(20, 22, 50, 0.22);
    --hairline-strong: rgba(20, 22, 50, 0.40);
  }
  .card-glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--bg-surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Final fallback — individual components should already gate their
   * animations on this query. This is a belt-and-braces sweep. */
  .card-hud[data-hud="true"]::before { animation: none !important; }
}

/* ================================================================
   Print posture (vendored idea, brain-tuned)

   The brain isn't a print app, but the briefing markdown view in
   Records is plausibly printable. Keep this minimal.
   ================================================================ */
@media print {
  .grain-overlay,
  .card-hud[data-hud="true"]::before,
  body::before,
  body::after {
    display: none !important;
  }
  .card-glass {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    border: 1px solid #d6d6d6 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}