/* ============================================================
   Analytics Village × Nightwave — Design Tokens
   Synthwave terminal. Warm near-black · neon pink/violet/cyan.
   Drop-in replacement for the original tokens.css — token names
   are load-bearing; only values change here.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Orbitron:wght@700;900&family=Share+Tech+Mono&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Nightwave neon palette — pink · violet · cyan on warm near-black */
  --av-green:       #00fff7;             /* Nightwave cyan → hi-vis accent    */
  --av-forest:      #ff2d78;             /* Nightwave pink → primary fills     */
  --av-forest-alt:  #cc1a5a;             /* Deeper pink (gradient companion)   */
  --av-purple:      #b44fff;             /* Nightwave violet                   */
  --av-orchid:      #7b5fff;             /* Indigo accent                      */
  --av-obsidian:    #0b0907;             /* Warm near-black                    */
  --av-slate:       #a08a78;             /* Warm muted grey — secondary text (WCAG AA on bg-1/3) */
  --av-white:       #f0ece4;             /* Nightwave warm white               */
  --av-pearl:       #f0ece4;
  --av-moonstone:   #e8e0d4;

  /* Pill chip backgrounds → dark-mode translucent for Nightwave */
  --av-juniper:     rgba(0, 255, 157, 0.12);
  --av-verbena:     rgba(180, 79, 255, 0.15);
  --av-galena:      rgba(255, 255, 255, 0.08);
  --av-hawthorn:    rgba(0, 255, 247, 0.10);
  --av-iris:        rgba(180, 79, 255, 0.10);
  --av-marble:      rgba(255, 255, 255, 0.06);

  /* Divider / border */
  --av-border:      rgba(255, 45, 120, 0.28);
  --av-border-soft: rgba(255, 255, 255, 0.10);
  --av-rule:        rgba(180, 79, 255, 0.22);

  /* Gradients — Nightwave bi-lighting: pink → violet → cyan */
  --av-grad-calathea:  linear-gradient(180deg, rgba(180,79,255,0.14) 0%, rgba(11,9,7,0) 100%);
  --av-grad-fern:      linear-gradient(135deg, #ff2d78 0%, #b44fff 50%, #00fff7 100%);
  --av-grad-emerald:   linear-gradient(180deg, #ff2d78 0%, #0b0907 100%);
  --av-grad-wisteria:  linear-gradient(180deg, rgba(180,79,255,0.18) 0%, rgba(11,9,7,0) 100%);
  --av-grad-caradonna: linear-gradient(135deg, #ff2d78 0%, #00fff7 100%);
  --av-grad-amethyst:  linear-gradient(180deg, #b44fff 0%, #0b0907 100%);
  --av-grad-hero:      linear-gradient(135deg, #ff2d78 0%, #b44fff 50%, #00fff7 100%);
  --av-grad-leaf:      linear-gradient(135deg, #ff2d78 0%, #b44fff 100%);

  /* Legacy gradient aliases */
  --av-grad-purple:  var(--av-grad-caradonna);
  --av-grad-forest:  var(--av-grad-emerald);
  --av-grad-plum:    var(--av-grad-amethyst);

  /* ---------- Gantt tokens ---------- */
  --gantt-bar-h:           28px;
  --gantt-bar-radius:      calc(var(--gantt-bar-h) / 2);
  --gantt-track-bg:        rgba(255, 255, 255, 0.07);
  --gantt-band-bg:         rgba(255, 255, 255, 0.03);
  --gantt-divider:         rgba(255, 45, 120, 0.18);
  --gantt-hair:            rgba(255, 255, 255, 0.07);
  --gantt-milestone-r:     7px;
  --gantt-milestone-ring:  2px;
  --gantt-milestone-fill:  #f0ece4;
  --gantt-row-h:           56px;

  /* Semantic: Nightwave dark (always-dark — pearl/obsidian both resolve here) */
  --fg-1:        #f0ece4;
  --fg-2:        #a08a78;
  --fg-3:        rgba(240, 236, 228, 0.55);
  --fg-inv:      #0b0907;
  --fg-link:     #b44fff;
  --fg-link-hover: #cc88ff;

  --bg-1:   #0b0907;
  --bg-2:   #130e0b;
  --bg-3:   #1b1410;
  --bg-inv: #f0ece4;

  --accent:        #ff2d78;
  --accent-strong: #00fff7;
  --accent-purple: #b44fff;
  --accent-hover:  #cc1a5a;

  --stroke-1: rgba(180, 79, 255, 0.18);
  --stroke-2: rgba(180, 79, 255, 0.36);

  /* Radii — sharp, technical (Nightwave aesthetic) */
  --r-xs:  1px;
  --r-sm:  2px;
  --r-md:  4px;
  --r-lg:  6px;
  --r-xl:  12px;
  --r-pill: 999px;

  /* Elevation — color glows, not neutral grey */
  --shadow-1: 0 0 0 1px rgba(180,79,255,0.20), 0 2px 8px rgba(0,0,0,0.55);
  --shadow-2: 0 0 0 1px rgba(255,45,120,0.18), 0 0 24px rgba(180,79,255,0.22), 0 4px 24px rgba(0,0,0,0.70);
  --shadow-3: 0 0 0 1px rgba(255,45,120,0.22), 0 0 60px rgba(180,79,255,0.15), 0 8px 48px rgba(0,0,0,0.90);

  /* Spacing — 4px base (unchanged) */
  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
  --s-5:  24px; --s-6:  32px; --s-7:  48px; --s-8:  64px;
  --s-9:  96px; --s-10: 128px;

  /* Typography — Nightwave ops-console system */
  --font-display: 'Playfair Display', Georgia, serif;    /* section heads, editorial titles */
  --font-body:    'Share Tech Mono', 'Courier New', monospace;  /* all UI labels, buttons, tags */
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;  /* code, identifiers */

  /* Type scale (unchanged) */
  --t-overline: 14px / 1.4;
  --t-caption:  12px / 1.4;
  --t-body-xs:  10px / 1.4;
  --t-body-sm:  14px / 1.5;
  --t-body:     16px / 1.5;
  --t-body-lg:  18px / 1.5;
  --t-lead:     20px / 1.4;
  --t-h6:       20px / 1.25;
  --t-h5:       24px / 1.2;
  --t-h4:       28px / 1.2;
  --t-h3:       40px / 1.1;
  --t-h2:       56px / 1.05;
  --t-h1:       64px / 1.05;
  --t-display: 120px / 1.05;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.09em;
}

/* Both pearl and obsidian resolve to Nightwave dark */
[data-theme="dark"],
[data-theme="pearl"] {
  --fg-1:        #f0ece4;
  --fg-2:        #a08a78;
  --fg-3:        rgba(240, 236, 228, 0.55);
  --fg-inv:      #0b0907;
  --fg-link:     #b44fff;
  --fg-link-hover: #cc88ff;
  --bg-1:   #0b0907;
  --bg-2:   #130e0b;
  --bg-3:   #1b1410;
  --bg-inv: #f0ece4;
  --accent:        #ff2d78;
  --accent-strong: #00fff7;
  --accent-purple: #b44fff;
  --stroke-1: rgba(180, 79, 255, 0.18);
  --stroke-2: rgba(180, 79, 255, 0.36);
}

/* ---------- Semantic element styles ---------- */
html, body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Nightwave bi-lighting atmosphere:
   pink top-left · violet center · cyan bottom-right */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 60% at  0%   0%, rgba(255, 45, 120, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 55% 65% at 50%  40%, rgba(180, 79, 255, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 65% 55% at 100% 100%, rgba(0, 255, 247, 0.11) 0%, transparent 65%);
}

/* Nightwave scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0px,
    rgba(0, 0, 0, 0.12) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.55;
  mix-blend-mode: multiply;
}

#root { position: relative; z-index: 1; }

/* Neon glow utilities */
.av-glow-text    { text-shadow: 0 0 8px currentColor, 0 0 22px currentColor; }
.av-glow-cyan    { box-shadow: 0 0 0 1px rgba(0,255,247,0.45), 0 0 18px rgba(0,255,247,0.25); }
.av-glow-magenta { box-shadow: 0 0 0 1px rgba(255,45,120,0.50), 0 0 18px rgba(255,45,120,0.30); }
.av-glow-lime    { box-shadow: 0 0 0 1px rgba(180,79,255,0.50), 0 0 18px rgba(180,79,255,0.25); }
@keyframes avPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(.7); } }
.av-pulse { animation: avPulse 1s ease-in-out infinite; }

/* Type */
h1, .h1 { font-family: var(--font-display); font-weight: 900; font-size: 64px;  line-height: 1.05; letter-spacing: -0.02em; color: var(--fg-1); }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: 56px;  line-height: 1.05; letter-spacing: -0.02em; color: var(--fg-1); }
h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: 40px;  line-height: 1.1;  letter-spacing: -0.01em; color: var(--fg-1); }
h4, .h4 { font-family: var(--font-display); font-weight: 700; font-size: 28px;  line-height: 1.2;  color: var(--fg-1); }
h5, .h5 { font-family: var(--font-body);    font-weight: 400; font-size: 24px;  line-height: 1.2;  color: var(--fg-1); }
h6, .h6 { font-family: var(--font-body);    font-weight: 400; font-size: 20px;  line-height: 1.25; color: var(--fg-1); }

p, .body  { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--fg-2); }
small, .caption { font-size: 12px; line-height: 1.4; color: var(--fg-2); font-family: var(--font-mono); }

deck-stage p, deck-stage .body, deck-stage small, deck-stage .caption,
deck-stage h1, deck-stage h2, deck-stage h3, deck-stage h4, deck-stage h5, deck-stage h6 {
  color: inherit;
}

.overline {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-1);
}

a       { color: var(--fg-link); text-decoration: none; }
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

code, pre { font-family: var(--font-mono); font-size: 13px; }
hr { border: 0; border-top: 1px solid var(--stroke-1); }

/* ---------- Gantt utility classes ---------- */
.tdg-band { position: absolute; background: var(--gantt-band-bg); }
.tdg-track {
  position: absolute;
  height: var(--gantt-bar-h);
  background: var(--gantt-track-bg);
  border-radius: var(--gantt-bar-radius);
}
.tdg-bar {
  position: absolute;
  height: var(--gantt-bar-h);
  border-radius: var(--gantt-bar-radius);
}
.tdg-milestone {
  position: absolute;
  width:  calc(var(--gantt-milestone-r) * 2);
  height: calc(var(--gantt-milestone-r) * 2);
  margin-left: calc(var(--gantt-milestone-r) * -1);
  margin-top:  calc(var(--gantt-bar-h) / 2 - var(--gantt-milestone-r));
  border-radius: 50%;
  background: var(--gantt-milestone-fill);
  border: var(--gantt-milestone-ring) solid var(--ring, var(--av-obsidian));
  box-sizing: border-box;
}