/* ============================================================================
   AlwynLabs — Design Tokens  (the single visual language of the platform)
   Industrial clean sci-fi: near-black canvas, steel hairlines, restrained
   cyan/gold glow. Shareable down to every subdomain.
   ========================================================================== */

:root {
  /* — Canvas & surfaces — */
  --bg-void:      #05080d;   /* deepest background            */
  --bg-base:      #080c13;   /* page base                     */
  --bg-panel:     #0c121b;   /* lifted panel surface          */
  --bg-panel-2:   #0f1621;   /* nested surface                */
  --bg-inset:     #070b11;   /* recessed wells                */

  /* — Hairlines / structure — */
  --line:         #17232f;   /* default hairline              */
  --line-bright:  #22384a;   /* emphasized edge               */
  --line-faint:   #101a24;   /* whisper divider               */

  /* — Text — */
  --ink:          #d6e2f0;   /* primary text                  */
  --ink-dim:      #8aa0b6;   /* secondary                     */
  --ink-mute:     #566b80;   /* labels / meta                 */
  --ink-ghost:    #33465a;   /* disabled / watermark          */

  /* — Accents (used sparingly) — */
  --cyan:         #45c8ff;   /* primary accent / active       */
  --cyan-deep:    #1c7fb0;
  --gold:         #f5b544;   /* arc-reactor warmth / caution  */
  --gold-deep:    #b57e1e;
  --signal:       #4ade80;   /* nominal / live                */
  --danger:       #ff5c5c;   /* alert / offline               */
  --purple:       #b989ff;   /* VS / trading                  */
  --amber:        #ffab40;   /* home                          */
  --green:        #57e3a0;   /* grow                          */

  /* — Accent glows (low-alpha, no neon bloom) — */
  --glow-cyan:    0 0 0 1px rgba(69,200,255,.28), 0 0 22px -6px rgba(69,200,255,.45);
  --glow-gold:    0 0 0 1px rgba(245,181,68,.26), 0 0 26px -8px rgba(245,181,68,.4);
  --glow-signal:  0 0 10px -2px rgba(74,222,128,.6);

  /* — Type — */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-hero:   clamp(28px, 4.5vw, 52px);
  --fs-h2:     18px;
  --fs-body:   13.5px;
  --fs-label:  10.5px;   /* uppercase micro-labels           */
  --fs-mono:   12px;
  --track:     0.16em;   /* label letter-spacing             */

  /* — Geometry — */
  --pad:       clamp(16px, 3vw, 32px);
  --gap:       16px;
  --radius:    3px;      /* tight, engineered corners        */
  --radius-lg: 5px;
  --bracket:   14px;     /* HUD corner-bracket size          */

  /* — Motion — */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --slow:      cubic-bezier(.65, .05, .36, 1);
}

/* — Reset — */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg-base);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
svg { display: block; }

/* — Ambient canvas: hairline grid + soft radial vignette — */
.canvas-field {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(69,200,255,.06), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(245,181,68,.045), transparent 55%),
    var(--bg-void);
}
.canvas-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 85%);
}
/* faint scanline shimmer — barely-there */
.canvas-scan {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}

/* — HUD micro-label — */
.lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* — Panel: the standard framed surface with corner brackets — */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel::before, .panel::after {
  content: ""; position: absolute; width: var(--bracket); height: var(--bracket);
  border-color: var(--line-bright); border-style: solid; border-width: 0;
  pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.panel::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* — status tones — */
.tone-signal { color: var(--signal); }
.tone-cyan   { color: var(--cyan);   }
.tone-amber  { color: var(--amber);  }
.tone-gold   { color: var(--gold);   }
.tone-steel  { color: var(--ink-mute); }
.tone-danger { color: var(--danger); }
.tone-purple { color: var(--purple); }
.tone-green  { color: var(--green);  }

/* — live pulse dot — */
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px -1px currentColor; }
.dot.pulse { animation: dotPulse 2.4s var(--ease) infinite; }
@keyframes dotPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}