/* Pauhu Design Tokens — v1.0.0
 * Bloomberg Terminal / CERN Control Room design system
 * Extracted from staging.pauhu.eu style.css v7.0.0
 *
 * Load order: brand.css → design-tokens.css → shell.css → site style.css
 *
 * These tokens extend brand.css with the dark-mode Bloomberg aesthetic.
 * brand.css defines the base palette (--ana-1..6, --color-*, --font-*).
 * design-tokens.css adds the quantum overlay: glass, glow, grid, ticker timing.
 *
 * (c) 2026 Pauhu Oy — EU jurisdiction
 */

/* ================================================================
   QUANTUM PALETTE — Bloomberg terminal dark mode extensions
   ================================================================
   These alias brand.css tokens into site-agnostic semantic names
   used by all four static sites (pauhu.eu, pauhu.com, pauhu.ai, pauhu.dev).
   ================================================================ */

:root {
  /* -- Surface aliases (light mode defaults come from brand.css) -- */
  --pauhu-color-accent:      var(--color-primary);
  --pauhu-color-live:        var(--brand);
  --pauhu-color-stale:       var(--color-success);
  --pauhu-color-text:        var(--color-on-surface);
  --pauhu-color-text-muted:  var(--color-on-surface-variant);
  --pauhu-color-bg:          var(--color-surface);
  --pauhu-color-bg-alt:      var(--color-container);
  --pauhu-color-border:      var(--color-outline-variant);

  /* -- Glass effects -- */
  --pauhu-glass-bg:          rgba(255, 255, 255, 0.03);
  --pauhu-glass-border:      rgba(255, 255, 255, 0.06);
  --pauhu-glass-blur:        blur(16px);
  --pauhu-glass-blur-header: blur(20px) saturate(1.2);

  /* -- Glow -- */
  --pauhu-glow-color:        rgba(101, 142, 178, 0.4);
  --pauhu-glow-subtle:       rgba(101, 142, 178, 0.08);
  --pauhu-glow-card:         rgba(101, 142, 178, 0.12);
  --pauhu-glow-cta:          rgba(101, 142, 178, 0.25);
  --pauhu-glow-cta-dark:     rgba(101, 142, 178, 0.3);

  /* -- Grid overlay (CERN control room coordinates) -- */
  --pauhu-grid-color:        rgba(101, 142, 178, 0.06);
  --pauhu-grid-color-dark:   rgba(101, 142, 178, 0.08);
  --pauhu-grid-size:         60px;
  --pauhu-grid-size-sm:      40px;

  /* -- Scanline overlay -- */
  --pauhu-scanline-color:    rgba(101, 142, 178, 0.015);
  --pauhu-scanline-gap:      4px;

  /* -- Crosshair marks -- */
  --pauhu-crosshair-color:   rgba(101, 142, 178, 0.2);

  /* -- Ticker -- */
  --pauhu-ticker-duration:   60s;
  --pauhu-ticker-duration-reverse: 45s;
  --pauhu-ticker-gap:        2.5rem;
  --pauhu-ticker-padding-y:  0.7rem;

  /* -- Live indicator -- */
  --pauhu-live-color:        #4ade80;
  --pauhu-live-glow:         rgba(74, 222, 128, 0.6);
  --pauhu-live-dot-size:     7px;
  --pauhu-live-pulse-duration: 1.5s;

  /* -- Status LEDs (IEC 60073 / Astro UXDS) -- */
  --pauhu-led-live:          hsl(99, 100%, 47%);
  --pauhu-led-annotating:    hsl(199, 100%, 59%);
  --pauhu-led-syncing:       hsl(52, 97%, 61%);
  --pauhu-led-degraded:      hsl(42, 100%, 50%);
  --pauhu-led-down:          hsl(0, 100%, 61%);

  /* -- Code / developer palette -- */
  --pauhu-code-green:        #4ade80;
  --pauhu-code-red:          #f87171;
  --pauhu-code-amber:        #fbbf24;
  --pauhu-code-blue:         #60a5fa;

  /* -- Card interaction -- */
  --pauhu-card-hover-lift:   -2px;
  --pauhu-card-transition:   all 0.2s;
  --pauhu-card-glass-bg:     rgba(0, 18, 38, 0.4);
  --pauhu-card-glass-border: rgba(101, 142, 178, 0.1);

  /* -- Typography: monospace emphasis -- */
  --pauhu-mono:              var(--font-mono);

  /* -- Spacing -- */
  --pauhu-section-padding:   5rem 2rem;
  --pauhu-section-padding-sm: 3rem 1.5rem;
  --pauhu-max-width:         var(--max-width);

  /* -- Animation -- */
  --pauhu-scroll-reveal-distance: 1rem;
  --pauhu-scroll-reveal-start-opacity: 0.3;
}


/* ================================================================
   DARK MODE — Bloomberg Terminal quantum palette
   ================================================================
   Overrides brand.css dark mode with deeper navy/teal values
   for the Bloomberg terminal aesthetic.
   ================================================================ */

[data-theme="dark"] {
  /* Deep navy surface overrides */
  --pauhu-color-accent:      var(--ana-4);
  --pauhu-color-bg:          #000d1a;
  --pauhu-color-bg-alt:      #001226;
  --pauhu-color-text:        #d8e4f0;
  --pauhu-color-text-muted:  #8ea4be;
  --pauhu-color-border:      #1a3050;

  /* Card glass in dark mode */
  --pauhu-card-glass-bg:     rgba(0, 18, 38, 0.5);
  --pauhu-card-glass-border: rgba(101, 142, 178, 0.08);
}


/* ================================================================
   TICKER ANIMATIONS
   ================================================================ */

@keyframes pauhu-ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes pauhu-ticker-scroll-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}


/* ================================================================
   LIVE PULSE ANIMATION
   ================================================================ */

@keyframes pauhu-live-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes pauhu-pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}


/* ================================================================
   CTA GLOW ANIMATION
   ================================================================ */

@keyframes pauhu-cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(101, 142, 178, 0); }
  50% { box-shadow: 0 0 20px 4px var(--pauhu-glow-cta); }
}

@keyframes pauhu-cta-glow-dark {
  0%, 100% { box-shadow: 0 0 0 0 rgba(101, 142, 178, 0); }
  50% { box-shadow: 0 0 24px 6px var(--pauhu-glow-cta-dark); }
}


/* ================================================================
   SCROLL REVEAL
   ================================================================ */

@keyframes pauhu-scroll-reveal {
  from {
    opacity: var(--pauhu-scroll-reveal-start-opacity);
    translate: 0 var(--pauhu-scroll-reveal-distance);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}


/* ================================================================
   FLOW PULSE (pipeline visualizations)
   ================================================================ */

@keyframes pauhu-flow-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}


/* ================================================================
   MAP PIN PULSE ANIMATIONS
   ================================================================ */

@keyframes pauhu-map-pulse {
  0% { r: 1.8; opacity: 0.5; }
  100% { r: 7; opacity: 0; }
}

@keyframes pauhu-map-pulse-eu {
  0% { r: 3; opacity: 0.5; }
  100% { r: 12; opacity: 0; }
}

@keyframes pauhu-map-pulse-inst {
  0% { r: 2.5; opacity: 0.5; }
  100% { r: 10; opacity: 0; }
}