/* ============================================
   SKEUOMORPHIC DESIGN SYSTEM
   2026-era dark glass / neumorphic aesthetic
   Extends global.css design tokens
   
   Usage: <link rel="stylesheet" href="skeuomorphic.css">
   Load AFTER global.css and components.css
   ============================================ */


/* ── 1. CSS Custom Properties ──────────────── */

:root {
  /* Glass backgrounds */
  --skeu-bg: linear-gradient(135deg, #1a1f2e 0%, #232F3E 100%);
  --skeu-bg-opacity: 0.95;

  /* Dual-direction shadows (light from above, dark below) */
  --skeu-shadow-up: 0 -4px 12px rgba(255,255,255,0.05);
  --skeu-shadow-down: 0 8px 24px rgba(0,0,0,0.4);
  --skeu-shadow-dual: var(--skeu-shadow-up), var(--skeu-shadow-down);

  /* Inner glow & border */
  --skeu-inner-glow: inset 0 0 0 1px rgba(255,255,255,0.03);
  --skeu-border: 1px solid rgba(255,255,255,0.08);

  /* Text */
  --skeu-text: #f0f0f0;
  --skeu-text-secondary: #a0a8b8;

  /* Inputs */
  --skeu-input-bg: #2a3040;
  --skeu-input-border: rgba(255,255,255,0.1);

  /* Radii */
  --skeu-radius-lg: 24px;
  --skeu-radius-md: 16px;
  --skeu-radius-sm: 12px;
}

/* Dark-mode overrides — intensify shadows and glows */
body.dark-mode {
  --skeu-shadow-up: 0 -6px 18px rgba(255,255,255,0.08);
  --skeu-shadow-down: 0 12px 36px rgba(0,0,0,0.6);
  --skeu-shadow-dual: var(--skeu-shadow-up), var(--skeu-shadow-down);
  --skeu-inner-glow: inset 0 0 0 1px rgba(255,255,255,0.06);
  --skeu-bg-opacity: 0.98;
}


/* ── 2. Component Classes ──────────────────── */

/* --- .skeu-card ---
   Dark glass card with gradient bg, dual shadow,
   inner glow, 24px radius, 24px padding            */
.skeu-card {
  background: var(--skeu-bg);
  box-shadow: var(--skeu-shadow-dual), var(--skeu-inner-glow);
  border: var(--skeu-border);
  border-radius: var(--skeu-radius-lg);
  padding: 24px;
  color: var(--skeu-text);
}

/* --- .skeu-modal ---
   Overrides .g-modal with skeuomorphic treatment    */
.skeu-modal {
  background: var(--skeu-bg) !important;
  opacity: var(--skeu-bg-opacity);
  box-shadow: var(--skeu-shadow-dual);
  border-radius: var(--skeu-radius-lg);
  color: var(--skeu-text);
  border: var(--skeu-border);
}

/* Modal header — subtle bottom border, light text */
.skeu-modal .g-modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #f0f0f0;
}

/* Modal body — inner glow inset shadow */
.skeu-modal .g-modal-body {
  box-shadow: var(--skeu-inner-glow);
}

/* Modal buttons — neumorphic hover */
.skeu-modal .g-btn {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.skeu-modal .g-btn:hover {
  box-shadow: var(--g-shadow-neu-hover);
}

/* Modal form controls — dark bg, light text, focus ring */
.skeu-modal input,
.skeu-modal select,
.skeu-modal textarea {
  background: #2a3040 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #e0e0e0 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.skeu-modal input:focus,
.skeu-modal select:focus,
.skeu-modal textarea:focus {
  border-color: #007185 !important;
  box-shadow: 0 0 0 3px rgba(0,113,133,0.25) !important;
  outline: none;
}

/* --- .skeu-input ---
   Standalone dark input field                       */
.skeu-input {
  background: #2a3040;
  border: 1px solid rgba(255,255,255,0.1);
  color: #e0e0e0;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.skeu-input:focus {
  border-color: #007185;
  box-shadow: 0 0 0 3px rgba(0,113,133,0.25);
  outline: none;
}
.skeu-input::placeholder {
  color: var(--skeu-text-secondary);
}

/* --- .skeu-btn ---
   Extends g-btn pill shape with Amazon palette      */
.skeu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  background: #ff9900;
  color: #ffffff;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  line-height: 1;
  white-space: nowrap;
}
.skeu-btn:hover {
  box-shadow: var(--g-shadow-neu-hover);
}
.skeu-btn:active {
  transform: scale(0.97);
}

/* Secondary button variant */
.skeu-btn-secondary {
  background: #007185;
  color: #ffffff;
}
.skeu-btn-secondary:hover {
  box-shadow: var(--g-shadow-neu-hover);
}

/* --- .skeu-badge ---
   Small pill badge with semi-transparent bg         */
.skeu-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  background: rgba(255,153,0,0.15);
  color: #ff9900;
}

/* Badge color variants */
.skeu-badge-green {
  background: rgba(6,125,98,0.15);
  color: #067D62;
}
.skeu-badge-red {
  background: rgba(177,39,4,0.15);
  color: #B12704;
}

/* --- .skeu-progress ---
   Glass track with accent fill                      */
.skeu-progress {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.skeu-progress-fill {
  height: 100%;
  background: #ff9900;
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* --- .skeu-health-dot ---
   12px status dot with color coding                 */
.skeu-health-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.skeu-health-dot.healthy {
  background: #067D62;
}
.skeu-health-dot.warning {
  background: #ff9900;
}
.skeu-health-dot.critical {
  background: #B12704;
  animation: skeu-pulse 1.5s ease-in-out infinite;
}


/* ── 3. Keyframe Animations ────────────────── */

/* Modal open — spring scale + fade in */
@keyframes skeu-modal-in {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Modal close — shrink + fade out */
@keyframes skeu-modal-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}

/* Slide up — for chat panel and cards */
@keyframes skeu-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Pulse — for critical health indicators */
@keyframes skeu-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Overlay fade in */
@keyframes skeu-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Overlay fade out */
@keyframes skeu-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}


/* ── Animation Utility Classes ─────────────── */

/* Modal opening — spring physics */
.skeu-modal-opening {
  animation: skeu-modal-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Modal closing — ease out */
.skeu-modal-closing {
  animation: skeu-modal-out 250ms ease-in forwards;
}

/* Slide up — spring physics (chat panel, cards) */
.skeu-slide-up {
  animation: skeu-slide-up 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Overlay opening — fade in */
.skeu-overlay-opening {
  animation: skeu-fade-in 300ms ease forwards;
}

/* Overlay closing — fade out */
.skeu-overlay-closing {
  animation: skeu-fade-out 200ms ease forwards;
}