/* ==========================================================================
   vision.guide Unified Design System
   ========================================================================== */

:root {
  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Editorial Light Theme Colors (HSL based for rich opacity control) */
  --bg: #f9f8f5;                 /* Warm paper background */
  --surface: #ffffff;            /* Pure white surfaces */
  --border: #e6e4dc;             /* Warm line borders */
  
  --text: #1e1a17;               /* Rich black ink */
  --text-2: #5c5752;             /* Muted charcoal */
  --text-3: #8e8982;             /* Lighter secondary warm grey */

  /* Accents */
  --accent-h: 221;
  --accent-s: 83%;
  --accent-l: 53%;
  --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-light: hsl(var(--accent-h), var(--accent-s), 95%);
  --accent-hover: hsl(var(--accent-h), var(--accent-s), 45%);
  --accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.08);

  /* Semantic Colors */
  --green-h: 152;
  --green-s: 57%;
  --green-l: 40%;
  --green: hsl(var(--green-h), var(--green-s), var(--green-l));
  --green-light: hsl(var(--green-h), var(--green-s), 96%);

  --red-h: 354;
  --red-s: 70%;
  --red-l: 54%;
  --red: hsl(var(--red-h), var(--red-s), var(--red-l));
  --red-light: hsl(var(--red-h), var(--red-s), 96%);

  --orange-h: 32;
  --orange-s: 90%;
  --orange-l: 50%;
  --orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l));
  --orange-light: hsl(var(--orange-h), var(--orange-s), 96%);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(30, 26, 23, 0.04);
  --shadow-md: 0 4px 16px -2px rgba(30, 26, 23, 0.05), 0 2px 6px -1px rgba(30, 26, 23, 0.03);
  --shadow-lg: 0 12px 30px -4px rgba(30, 26, 23, 0.08), 0 4px 12px -2px rgba(30, 26, 23, 0.04);
  
  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Motion & Animations */
  --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Base Styles */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: inherit;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Glassmorphism Styles */
.glass-header {
  background: rgba(30, 26, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(230, 228, 220, 0.5);
  box-shadow: var(--shadow-md);
}

/* Hover & Interactive Utility Classes */
.hover-lift {
  transition: var(--transition-bounce);
}
.hover-lift:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

/* Dynamic Interactive Buttons */
button, .btn {
  font-family: var(--font-sans);
  transition: var(--transition-smooth);
}
button:hover, .btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
button:active, .btn:active {
  transform: scale(0.97);
}
button:disabled, .btn:disabled {
  opacity: 0.5;
  transform: none;
  cursor: not-allowed;
}

/* Modern Input Focus States */
textarea, input, select {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
textarea:focus, input:focus, select:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Skeleton Loading Shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}

.skeleton {
  background: linear-gradient(90deg, #f2f1ec 25%, #e6e4dc 50%, #f2f1ec 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.skeleton-title {
  width: 35%;
  height: 1.4rem;
  margin-bottom: 0.4rem;
}

.skeleton-line {
  width: 100%;
  height: 0.95rem;
}

.skeleton-line-short {
  width: 80%;
  height: 0.95rem;
}

/* Smooth Accordion Rotations */
.caret-rotate {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.open .caret-rotate {
  transform: rotate(90deg);
}

/* Custom Likert Slider Customizations */
input[type="range"] {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  outline: none;
  -webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.1s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: var(--accent-hover);
}