/* ============================================
   DESIGN SYSTEM — Cross-cutting tokens for the UX 100% expansion
   Used by:
     - Disaster Impact Map (Wave A.8.5)
     - Cinematic Landing (Phase 2)
     - Country Dossier (Phase 3)
     - Inline Rich Answers (Phase 4)
     - Cards harmonization cross-surface
   ============================================ */

:root {
  /* SEVERITY TOKENS — used for risk-level color coding everywhere
     (cards left-borders, gauge zones, glow markers, delta pills) */
  --severity-stable:    #5e574e;   /* warm grey, neutral */
  --severity-elevated:  #C97B1F;   /* paper-orange, attention */
  --severity-critical:  #B5321A;   /* paper-red, urgent */
  --severity-severe:    #7c1010;   /* deep red, alarm */

  /* GLOW EFFECTS — for cinematic landing country markers + alert rings */
  --glow-stable:    none;
  --glow-elevated:  0 0 12px rgba(201,123,31,0.45);
  --glow-critical:  0 0 18px rgba(181,50,26,0.55);
  --glow-severe:    0 0 24px rgba(124,16,16,0.65);

  /* EASING CURVES — premium feel for animations */
  --ease-out-quint:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* DURATION TOKENS — keep animations consistent across components */
  --duration-instant: 100ms;
  --duration-quick:   200ms;
  --duration-normal:  350ms;
  --duration-slow:    600ms;
  --duration-cinema:  1500ms;

  /* CARD ELEVATION — consistent shadow heights */
  --elev-rest:  0 1px 2px rgba(0,0,0,0.04);
  --elev-hover: 0 6px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --elev-modal: 0 24px 48px rgba(0,0,0,0.18);

  /* SEVERITY ALPHA BACKGROUNDS — for soft highlight bands */
  --severity-bg-stable:    rgba(94,87,78,0.06);
  --severity-bg-elevated:  rgba(201,123,31,0.10);
  --severity-bg-critical:  rgba(181,50,26,0.10);
  --severity-bg-severe:    rgba(124,16,16,0.12);
}

/* ─── Severity utility classes ──────────────────────────────────── */

.severity-color-stable    { color: var(--severity-stable); }
.severity-color-elevated  { color: var(--severity-elevated); }
.severity-color-critical  { color: var(--severity-critical); }
.severity-color-severe    { color: var(--severity-severe); }

.severity-bg-stable    { background-color: var(--severity-bg-stable); }
.severity-bg-elevated  { background-color: var(--severity-bg-elevated); }
.severity-bg-critical  { background-color: var(--severity-bg-critical); }
.severity-bg-severe    { background-color: var(--severity-bg-severe); }

.severity-border-stable    { border-left: 3px solid var(--severity-stable); }
.severity-border-elevated  { border-left: 3px solid var(--severity-elevated); }
.severity-border-critical  { border-left: 3px solid var(--severity-critical); }
.severity-border-severe    { border-left: 3px solid var(--severity-severe); }

.severity-glow-stable     { box-shadow: var(--glow-stable); }
.severity-glow-elevated   { box-shadow: var(--glow-elevated); }
.severity-glow-critical   { box-shadow: var(--glow-critical); }
.severity-glow-severe     { box-shadow: var(--glow-severe); }

/* ─── Cross-cutting hover lift pattern ──────────────────────────── */

.hover-lift {
  transition: transform var(--duration-quick) var(--ease-out-quint),
              box-shadow var(--duration-quick) var(--ease-out-quint);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-hover);
}

/* ─── Skeleton shimmer (for [data-loading="true"]) ──────────────── */

@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

[data-loading="true"] {
  background: linear-gradient(90deg,
      rgba(0,0,0,0.04) 0%,
      rgba(0,0,0,0.10) 50%,
      rgba(0,0,0,0.04) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1500ms linear infinite;
  color: transparent !important;
  border-radius: 4px;
}

/* ─── Count-up animations bootstrap ─────────────────────────────── */

[data-count-up] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ─── Fade-in-after-delay (used by cinematic landing) ───────────── */

[data-fade-in-after] {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out-quint);
}
[data-fade-in-after].is-visible {
  opacity: 1;
}

/* ─── Pulsing ring keyframe (GDACS active hazards on landing) ───── */

@keyframes pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(2.2);  opacity: 0; }
}

.pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--severity-critical);
  animation: pulse-ring 2s var(--ease-out-quint) infinite;
  pointer-events: none;
}
.pulse-ring--elevated {
  border-color: var(--severity-elevated);
}

/* ─── Floating tooltip (cross-cutting hover info) ───────────────── */

.tooltip-float {
  position: fixed;
  z-index: 10000;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(20,18,14,0.92);
  color: #F5EFE0;
  font-size: 0.78rem;
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--duration-quick), transform var(--duration-quick);
  box-shadow: var(--elev-hover);
}
.tooltip-float.is-visible {
  opacity: 1;
  transform: translateY(0);
}