/* ═══════════════════════════════════════════════════════════════════
   Averionics Theme — canonical tokens
   ───────────────────────────────────────────────────────────────────
   Source of truth: payment processing/averionics_theme_pack.md
   Style: technical-instrument-panel-hud-aerospace-cockpit
   Mode default: Midnight Command (dark). Companion: Precision White.
   Accent ratio: 80 neutrals / 15 cyan emphasis / 5 orange action.
   Do not edit per-application. Override via [data-theme] only.
   ═══════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="averionics-dark"] {
  /* Surfaces — Midnight Command */
  --av-bg-canvas:    #090B0F;
  --av-bg-surface-1: #11161D;
  --av-bg-surface-2: #171E27;
  --av-bg-surface-3: #1E2632;
  --av-bg-elevated:  #232D3A;

  /* Foreground */
  --av-fg-primary:   #EEF4FA;
  --av-fg-secondary: #A9B7C7;
  --av-fg-tertiary:  #738398;

  /* Lines */
  --av-line-soft:    #243140;
  --av-line-strong:  #344658;

  /* Accents */
  --av-accent-cyan:        #18D2FF;
  --av-accent-cyan-soft:   #8EEBFF;
  --av-accent-orange:      #FF8A1F;
  --av-accent-orange-soft: #FFC078;
  --av-accent-purple:      #8B5CF6;  /* multi-stage visualizations */

  /* State */
  --av-state-success: #37D67A;
  --av-state-warning: #FFB347;
  --av-state-danger:  #FF5A5F;

  /* Geometry */
  --av-radius-sm:   8px;
  --av-radius-md:   12px;
  --av-radius-lg:   16px;
  --av-radius-xl:   20px;
  --av-radius-pill: 999px;

  /* Spacing scale */
  --av-space-1: 4px;
  --av-space-2: 8px;
  --av-space-3: 12px;
  --av-space-4: 16px;
  --av-space-5: 20px;
  --av-space-6: 24px;
  --av-space-7: 32px;
  --av-space-8: 40px;
  --av-space-9: 48px;

  /* Elevation — dark */
  --av-shadow-low:  0 2px 8px rgba(0,0,0,0.24);
  --av-shadow-mid:  0 8px 24px rgba(0,0,0,0.32);
  --av-shadow-high: 0 16px 40px rgba(0,0,0,0.42);

  /* Glow — used only for active / focused / armed states */
  --av-glow-cyan:   0 0 0 1px rgba(24,210,255,0.45), 0 0 18px rgba(24,210,255,0.16);
  --av-glow-orange: 0 0 0 1px rgba(255,138,31,0.45), 0 0 18px rgba(255,138,31,0.16);

  /* Motion — measured, mechanical, never bouncy */
  --av-duration-control: 150ms;
  --av-duration-panel:   220ms;
  --av-duration-dock:    180ms;
  --av-easing-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --av-easing-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  /* Type */
  --av-font-ui:   "Sora", "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  --av-font-mono: "IBM Plex Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

:root[data-theme="averionics-light"] {
  --av-bg-canvas:    #F3F5F7;
  --av-bg-surface-1: #FBFCFD;
  --av-bg-surface-2: #F0F3F6;
  --av-bg-surface-3: #E5EBF0;
  --av-bg-elevated:  #FFFFFF;

  --av-fg-primary:   #18212B;
  --av-fg-secondary: #445364;
  --av-fg-tertiary:  #6E7D90;

  --av-line-soft:    #D7E0E8;
  --av-line-strong:  #C3CED9;

  --av-accent-cyan:        #007A9C;
  --av-accent-cyan-soft:   #7DDCF4;
  --av-accent-orange:      #A85C00;
  --av-accent-orange-soft: #F8C27D;
  --av-accent-purple:      #7C3AED;  /* multi-stage visualizations */

  /* State — light mode */
  --av-state-success: #157A43;
  --av-state-warning: #8A5600;
  --av-state-danger:  #D92B2F;

  --av-shadow-low:  0 2px 8px rgba(18,33,52,0.08);
  --av-shadow-mid:  0 8px 24px rgba(18,33,52,0.12);
  --av-shadow-high: 0 16px 40px rgba(18,33,52,0.16);

  --av-glow-cyan:   0 0 0 1px rgba(0,169,214,0.45), 0 0 18px rgba(0,169,214,0.16);
  --av-glow-orange: 0 0 0 1px rgba(242,138,24,0.45), 0 0 18px rgba(242,138,24,0.16);
}

/* ─── Auto-detect system mode (only when no explicit theme set) ─── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --av-bg-canvas:    #F3F5F7;
    --av-bg-surface-1: #FBFCFD;
    --av-bg-surface-2: #F0F3F6;
    --av-bg-surface-3: #E5EBF0;
    --av-bg-elevated:  #FFFFFF;
    --av-fg-primary:   #18212B;
    --av-fg-secondary: #445364;
    --av-fg-tertiary:  #6E7D90;
    --av-line-soft:    #D7E0E8;
    --av-line-strong:  #C3CED9;
    --av-accent-cyan:  #007A9C;
    --av-accent-orange:#A85C00;
    --av-shadow-low:  0 2px 8px rgba(18,33,52,0.08);
    --av-shadow-mid:  0 8px 24px rgba(18,33,52,0.12);
    --av-shadow-high: 0 16px 40px rgba(18,33,52,0.16);
  }
}

/* ─── Reusable Averionics primitives ─── */
.av-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--av-bg-surface-2);
  border: 1px solid var(--av-line-soft);
  border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-mid), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: var(--av-space-5);
}

.av-button {
  display: inline-flex;
  align-items: center;
  gap: var(--av-space-2);
  padding: var(--av-space-2) var(--av-space-4);
  border-radius: var(--av-radius-md);
  border: 1px solid var(--av-line-strong);
  background: var(--av-bg-surface-3);
  color: var(--av-fg-primary);
  font-family: var(--av-font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color  var(--av-duration-control) var(--av-easing-out),
    box-shadow    var(--av-duration-control) var(--av-easing-out),
    background    var(--av-duration-control) var(--av-easing-out);
}
.av-button:hover { border-color: var(--av-accent-cyan-soft); }
.av-button:focus-visible,
.av-button.is-active {
  outline: none;
  border-color: var(--av-accent-cyan);
  box-shadow: var(--av-glow-cyan);
}
.av-button.is-armed,
.av-button[data-variant="critical"] {
  border-color: var(--av-accent-orange);
}
.av-button.is-armed:focus-visible,
.av-button[data-variant="critical"]:focus-visible {
  box-shadow: var(--av-glow-orange);
}

/* Instrument-grade input wells */
.av-input {
  background: var(--av-bg-surface-1);
  border: 1px solid var(--av-line-soft);
  border-radius: var(--av-radius-sm);
  padding: var(--av-space-2) var(--av-space-3);
  color: var(--av-fg-primary);
  font-family: var(--av-font-ui);
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.18);
  transition: border-color var(--av-duration-control) var(--av-easing-out),
              box-shadow   var(--av-duration-control) var(--av-easing-out);
}
.av-input:focus {
  outline: none;
  border-color: var(--av-accent-cyan);
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,0.18),
    0 0 0 1px rgba(24,210,255,0.45);
}

/* Micro-label — uppercase tracking ONLY for tiny labels */
.av-label {
  display: block;
  font-family: var(--av-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--av-fg-tertiary);
  margin-bottom: var(--av-space-1);
}

/* Numeric / telemetry cells */
.av-mono {
  font-family: var(--av-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0;
}

/* Cyan = active/live, Orange = action/armed/anomaly */
.av-state-active   { color: var(--av-accent-cyan); }
.av-state-armed    { color: var(--av-accent-orange); }
.av-state-success  { color: var(--av-state-success); }
.av-state-warning  { color: var(--av-state-warning); }
.av-state-danger   { color: var(--av-state-danger); }

/* Docking sockets — receiving plate, not generic highlight */
.av-dock-socket {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--av-line-soft);
  background: color-mix(in srgb, var(--av-bg-surface-1) 92%, black);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -8px 16px rgba(0,0,0,0.12);
  transition: border-color var(--av-duration-dock) var(--av-easing-out),
              box-shadow   var(--av-duration-dock) var(--av-easing-out);
}
.av-dock-socket.is-target {
  border-color: rgba(24,210,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -8px 16px rgba(0,0,0,0.12),
    0 0 0 1px rgba(24,210,255,0.28);
}

/* Reduced motion respect — averionics is restrained, but never punishes */
@media (prefers-reduced-motion: reduce) {
  :root {
    --av-duration-control: 0ms;
    --av-duration-panel:   0ms;
    --av-duration-dock:    0ms;
  }
}