/* ============================================================
 * Macrition Natural Depth, VISIBLE Design Enhancement
 * ============================================================
 * 
 * This file makes IMMEDIATELY VISIBLE changes to the interface:
 * 
 * 1. Header: Real floating bar with visible blur + shadow
 * 2. Cards: Visible depth with multi-layer shadows + top highlight
 * 3. Buttons: Tactile press/hover with visible color shift
 * 4. Background: Warm gradient instead of flat white
 * 5. Navigation: Visible dropdown elevation
 * 6. Inputs: Visible inner depth on focus
 * 7. Footer: Warm gradient with depth
 * 8. Result panels: Ambient orange glow
 * 9. Spacing: More generous padding on sections
 * 10. Typography: Better visual hierarchy
 *
 * Loaded AFTER design-system.css so it overrides the flat styles.
 * ============================================================ */

/* ============================================================
 * 1. ROOT TOKENS, Enhanced depth system
 * ============================================================ */
:root {
  /* Enhanced shadows, multi-layer for real depth */
  --nd-shadow-card:
    0 1px 3px rgba(17,24,39,.05),
    0 4px 12px rgba(17,24,39,.04),
    0 12px 32px rgba(17,24,39,.02);
  
  --nd-shadow-card-hover:
    0 2px 8px rgba(17,24,39,.06),
    0 8px 24px rgba(17,24,39,.06),
    0 20px 48px rgba(17,24,39,.03);
  
  --nd-shadow-header:
    0 1px 2px rgba(17,24,39,.04),
    0 4px 16px rgba(17,24,39,.03);
  
  --nd-shadow-header-scrolled:
    0 2px 8px rgba(17,24,39,.06),
    0 8px 24px rgba(17,24,39,.04);
  
  --nd-shadow-dropdown:
    0 4px 16px rgba(17,24,39,.08),
    0 16px 48px rgba(17,24,39,.04),
    0 32px 64px rgba(17,24,39,.02);
  
  --nd-shadow-modal:
    0 8px 32px rgba(17,24,39,.08),
    0 24px 64px rgba(17,24,39,.06),
    0 48px 120px rgba(17,24,39,.03);

  /* Inner light, visible top edge highlight */
  --nd-inner-light: inset 0 1px 0 rgba(255,255,255,.12);
  --nd-inner-shadow: inset 0 1px 2px rgba(0,0,0,.03);

  /* Warm background gradient */
  --nd-bg-gradient: linear-gradient(180deg, #FAFBFC 0%, #F8F9FB 40%, #F5F7FA 100%);
  
  /* Warm section gradients */
  --nd-section-warm: linear-gradient(180deg, rgba(255,251,235,.4) 0%, transparent 100%);
  --nd-section-cool: linear-gradient(180deg, rgba(239,246,255,.4) 0%, transparent 100%);

  /* Motion */
  --nd-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nd-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nd-speed: 200ms;
  --nd-speed-slow: 350ms;
}

[data-theme="dark"] {
  --nd-shadow-card:
    0 1px 3px rgba(0,0,0,.3),
    0 4px 12px rgba(0,0,0,.2),
    0 12px 32px rgba(0,0,0,.1);
  
  --nd-shadow-card-hover:
    0 2px 8px rgba(0,0,0,.35),
    0 8px 24px rgba(0,0,0,.25),
    0 20px 48px rgba(0,0,0,.12);
  
  --nd-shadow-header:
    0 1px 2px rgba(0,0,0,.4),
    0 4px 16px rgba(0,0,0,.2);
  
  --nd-shadow-header-scrolled:
    0 2px 8px rgba(0,0,0,.45),
    0 8px 24px rgba(0,0,0,.25);
  
  --nd-shadow-dropdown:
    0 4px 16px rgba(0,0,0,.4),
    0 16px 48px rgba(0,0,0,.2),
    0 32px 64px rgba(0,0,0,.1);
  
  --nd-inner-light: inset 0 1px 0 rgba(255,255,255,.06);
  --nd-inner-shadow: inset 0 1px 2px rgba(0,0,0,.15);
  
  --nd-bg-gradient: linear-gradient(180deg, #0F172A 0%, #0D1426 40%, #0B1120 100%);
  --nd-section-warm: linear-gradient(180deg, rgba(69,26,3,.08) 0%, transparent 100%);
  --nd-section-cool: linear-gradient(180deg, rgba(23,37,84,.08) 0%, transparent 100%);
}

/* ============================================================
 * 2. BODY, warm gradient background instead of flat white
 * ============================================================ */
body {
  background: var(--nd-bg-gradient) !important;
  background-attachment: fixed !important;
}

/* ============================================================
 * 3. HEADER, real floating navigation with visible depth
 * ============================================================ */
.site-header {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: var(--nd-shadow-header), var(--nd-inner-light) !important;
  border-bottom: 1px solid rgba(226,232,240,.4) !important;
}

.site-header.scrolled {
  box-shadow: var(--nd-shadow-header-scrolled), var(--nd-inner-light) !important;
}

[data-theme="dark"] .site-header {
  background: rgba(15,23,42,.82) !important;
  border-bottom: 1px solid rgba(51,65,85,.3) !important;
}

/* Nav dropdowns, visible elevation */
.nav-dropdown,
.nav-mega {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: var(--nd-shadow-dropdown), var(--nd-inner-light) !important;
  border: 1px solid rgba(226,232,240,.5) !important;
  border-radius: 20px !important;
}

[data-theme="dark"] .nav-dropdown,
[data-theme="dark"] .nav-mega {
  background: rgba(30,41,59,.95) !important;
  border-color: rgba(51,65,85,.4) !important;
}

/* ============================================================
 * 4. CARDS, visible depth with multi-layer shadows + top highlight
 * ============================================================ */

/* Override the flat glass cards */
.card {
  background: var(--surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(226,232,240,.6) !important;
  border-radius: 20px !important;
  box-shadow: var(--nd-shadow-card), var(--nd-inner-light) !important;
  padding: 28px !important;
}

.card-hover:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--nd-shadow-card-hover), var(--nd-inner-light) !important;
  border-color: rgba(96,165,250,.4) !important;
}

/* Tool cards, visible depth + accent top bar */
.tool-card {
  background: var(--surface) !important;
  border: 1px solid rgba(226,232,240,.6) !important;
  border-radius: 18px !important;
  box-shadow: var(--nd-shadow-card), var(--nd-inner-light) !important;
  padding: 24px !important;
}

.tool-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--nd-shadow-card-hover), var(--nd-inner-light) !important;
  border-color: rgba(96,165,250,.3) !important;
}

/* Glass surfaces, keep blur but add real depth */
.glass-surface,
.stat-card,
.admin-card {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  box-shadow: var(--nd-shadow-card), var(--nd-inner-light) !important;
  border-radius: 18px !important;
}

[data-theme="dark"] .glass-surface,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .admin-card {
  background: rgba(30,41,59,.85) !important;
  border-color: rgba(51,65,85,.3) !important;
}

/* ============================================================
 * 5. BUTTONS, tactile with visible press/hover
 * ============================================================ */
.btn {
  transition: all var(--nd-speed) var(--nd-ease) !important;
  box-shadow: 0 1px 2px rgba(17,24,39,.06), var(--nd-inner-light) !important;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
}

.btn:active:not(:disabled) {
  transform: translateY(0) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.08) !important;
  transition: all 100ms var(--nd-ease) !important;
}

/* Primary button, blue gradient with colored shadow */
.btn-primary {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-d) 100%) !important;
  box-shadow:
    0 1px 3px rgba(37,99,235,.2),
    0 2px 8px rgba(37,99,235,.1),
    var(--nd-inner-light) !important;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--primary-l) 0%, var(--primary) 100%) !important;
  box-shadow:
    0 2px 8px rgba(37,99,235,.25),
    0 4px 16px rgba(37,99,235,.12),
    0 8px 24px rgba(37,99,235,.04),
    var(--nd-inner-light) !important;
}

/* Accent button, green */
.btn-accent {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-d) 100%) !important;
  box-shadow:
    0 1px 3px rgba(34,197,94,.2),
    0 2px 8px rgba(34,197,94,.1),
    var(--nd-inner-light) !important;
}

.btn-accent:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--accent-l) 0%, var(--accent) 100%) !important;
  box-shadow:
    0 2px 8px rgba(34,197,94,.25),
    0 4px 16px rgba(34,197,94,.12),
    var(--nd-inner-light) !important;
}

/* Dark button */
.btn-dark {
  background: linear-gradient(180deg, var(--text) 0%, var(--text-2) 100%) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.15), var(--nd-inner-light) !important;
}

.btn-dark:hover:not(:disabled) {
  box-shadow: 0 2px 8px rgba(15,23,42,.2), var(--nd-inner-light) !important;
}

/* Ghost button */
.btn-ghost {
  background: var(--surface) !important;
  border-color: var(--border-2) !important;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), var(--nd-inner-light) !important;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--surface-2) !important;
  border-color: var(--primary-l) !important;
  box-shadow: 0 2px 8px rgba(17,24,39,.06), var(--nd-inner-light) !important;
}

/* ============================================================
 * 6. INPUTS, visible inner depth + focus glow
 * ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select,
.admin-input {
  box-shadow: var(--nd-inner-shadow) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

input:focus:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea:focus,
select:focus,
.admin-input:focus {
  border-color: var(--primary) !important;
  box-shadow:
    0 0 0 3px rgba(37,99,235,.1),
    var(--nd-inner-shadow) !important;
  outline: none !important;
}

/* ============================================================
 * 7. FOOTER
 * The footer keeps the brand navy from design-system.css; the layer
 * only adds a soft top edge so the transition from page to footer
 * has depth without changing the color.
 * ============================================================ */
.site-footer {
  box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.08) !important;
}

/* ============================================================
 * 8. SECTIONS, more generous spacing
 * ============================================================ */
.section {
  padding: 80px 0 !important;
}

@media (max-width: 768px) {
  .section {
    padding: 48px 0 !important;
  }
}

/* ============================================================
 * 9. HERO, ambient warm glow
 * ============================================================ */
section.hero,
.hero-section,
[class*="hero"] {
  position: relative;
  overflow: hidden;
}

section.hero::before,
.hero-section::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  max-width: 100%;
  background: radial-gradient(
    ellipse at center,
    rgba(249,115,22,.08) 0%,
    rgba(37,99,235,.04) 35%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

section.hero > *,
.hero-section > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
 * 10. TYPOGRAPHY, better visual hierarchy
 * ============================================================ */
h1 {
  letter-spacing: -0.025em !important;
}

h2 {
  letter-spacing: -0.02em !important;
}

/* Hero numbers, editorial serif */
.stat-value,
.result-number,
.result-value {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}

/* ============================================================
 * 11. PROGRESS BARS, dimensional
 * ============================================================ */
.progress,
.progress-bar {
  background: var(--surface-3) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08) !important;
  overflow: hidden !important;
}

.progress-bar-fill,
.progress-fill {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25) !important;
  border-radius: 999px !important;
}

/* ============================================================
 * 12. COMMAND PALETTE / MODALS, highest elevation
 * ============================================================ */
.cmdk-modal,
.modal-content {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  box-shadow: var(--nd-shadow-modal), var(--nd-inner-light) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 24px !important;
}

[data-theme="dark"] .cmdk-modal,
[data-theme="dark"] .modal-content {
  background: rgba(30,41,59,.96) !important;
  border-color: rgba(51,65,85,.3) !important;
}

.cmdk-overlay,
.modal-overlay {
  background: rgba(15,23,42,.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ============================================================
 * 13. BADGES & CHIPS, subtle pill surfaces
 * ============================================================ */
.badge,
.chip,
.tag {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(17,24,39,.03) !important;
}

/* ============================================================
 * 14. REDUCED MOTION, accessibility
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  
  .btn:hover:not(:disabled),
  .card-hover:hover,
  .tool-card:hover {
    transform: none !important;
  }
}

/* ============================================================
 * 15. MOBILE, reduce blur for GPU performance
 * ============================================================ */
@media (max-width: 768px) {
  .site-header {
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  }
  
  .nav-dropdown,
  .nav-mega {
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  }
  
  .cmdk-modal,
  .modal-content {
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  }
  
  .btn:hover:not(:disabled),
  .card-hover:hover,
  .tool-card:hover {
    transform: none !important;
  }
  
  .card {
    padding: 20px !important;
  }
}