/* ==========================================================================
   ROSEHIP DARK CLAYMORPHISM — ELEGANT TACTILE CLAY DESIGN SYSTEM
   Soft 3D Extruded Surfaces + Rosehip Pink Clay Accents
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Surface & Base Colors */
  --bg-color: #242023;
  --panel-bg: #352c31;
  --panel-elevated: #42383e;
  --panel-border: rgba(234, 140, 159, 0.16);
  
  /* Rosehip Brand Colors */
  --rosehip-pink: #ea8c9f;
  --rosehip-pink-gradient: linear-gradient(145deg, #f8aab9, #e08396);
  --rosehip-glow: rgba(234, 140, 159, 0.35);
  
  /* Typography Colors */
  --text-main: #fcf8f9;
  --text-muted: #c8bdc1;
  --text-primary: #fcf8f9;
  --text-dimmed: #c8bdc1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(234, 140, 159, 0.08) 0%, transparent 70%),
    radial-gradient(circle at 80% 100%, #100d0e 0%, transparent 100%);
  color: var(--text-main);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  line-height: 1.6;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: #2e262b;
  border-radius: 10px;
  border: 2px solid var(--bg-color);
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.1), inset -1px -1px 2px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rosehip-pink);
}

/* ==========================================================================
   Clay Surfaces & Extruded Panels
   ========================================================================== */
.hw-card, .glass-card, .container, .card, .status-banner, .clay-surface {
  background: var(--panel-bg) !important;
  border: 1px solid rgba(234, 140, 159, 0.12) !important;
  border-radius: 28px !important;
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.65), -6px -6px 16px rgba(255, 255, 255, 0.03), inset 3px 3px 6px rgba(255, 255, 255, 0.08), inset -4px -4px 8px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease !important;
}

.hw-card:hover, .glass-card:hover, .card:hover {
  transform: translateY(-2px);
  box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.7), -6px -6px 18px rgba(255, 255, 255, 0.04), inset 4px 4px 8px rgba(255, 255, 255, 0.1), inset -4px -4px 8px rgba(0, 0, 0, 0.5) !important;
}

.clay-elevated, .card-elevated, .panel-elevated {
  background: var(--panel-elevated) !important;
  border: 1px solid rgba(234, 140, 159, 0.12) !important;
  border-radius: 24px !important;
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.65), -6px -6px 16px rgba(255, 255, 255, 0.03), inset 3px 3px 6px rgba(255, 255, 255, 0.08), inset -4px -4px 8px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   3D Tactile Clay Buttons
   ========================================================================== */
.action-button, .btn, .contact-btn, .back-link, .skeuo-btn, .clay-btn {
  background: linear-gradient(145deg, #2f2529, #20191c) !important;
  border: 1px solid rgba(234, 140, 159, 0.12) !important;
  border-radius: 24px !important;
  padding: 12px 24px !important;
  color: var(--text-main) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.02), inset 2px 2px 4px rgba(255, 255, 255, 0.2), inset -3px -3px 6px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s ease, background 0.2s ease !important;
}

/* Rosehip Pink Accent Clay Button */
.btn-primary, .action-button-pink, .btn-pink, .contact-btn-pink, .btn-accent {
  background: linear-gradient(145deg, #f599ac, #d9788d) !important;
  color: #171416 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 700 !important;
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.5), -4px -4px 10px rgba(255, 255, 255, 0.02), inset 2px 2px 4px rgba(255, 255, 255, 0.2), inset -3px -3px 6px rgba(0, 0, 0, 0.4) !important;
}

.action-button:hover, .btn:hover, .contact-btn:hover, .back-link:hover, .skeuo-btn:hover, .clay-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.6), -4px -4px 12px rgba(255, 255, 255, 0.04), inset 2px 2px 5px rgba(255, 255, 255, 0.25), inset -3px -3px 6px rgba(0, 0, 0, 0.4), 0 0 12px var(--rosehip-glow) !important;
  border-color: rgba(234, 140, 159, 0.3) !important;
}

.action-button:active, .btn:active, .contact-btn:active, .back-link:active, .skeuo-btn:active, .clay-btn:active {
  transform: translateY(2px) !important;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   Inset Clay Input Wells
   ========================================================================== */
.hw-well, .form-input, textarea, select, .clay-well {
  background: #141012 !important;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.7), inset -2px -2px 6px rgba(255, 255, 255, 0.03) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(234, 140, 159, 0.12) !important;
  color: var(--text-main) !important;
  padding: 12px 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-input:focus, textarea:focus, select:focus, .hw-well:focus {
  border-color: var(--rosehip-pink) !important;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.7), inset -2px -2px 6px rgba(255, 255, 255, 0.03), 0 0 10px var(--rosehip-glow) !important;
  outline: none !important;
}

/* ==========================================================================
   Additional Clay Utilities (Pills, LEDs, Glows, Badges)
   ========================================================================== */
.clay-pill, .glass-pill {
  background: var(--panel-bg) !important;
  border: 1px solid rgba(234, 140, 159, 0.12) !important;
  border-radius: 32px !important;
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.65), -6px -6px 16px rgba(255, 255, 255, 0.03), inset 3px 3px 6px rgba(255, 255, 255, 0.08), inset -4px -4px 8px rgba(0, 0, 0, 0.5) !important;
  padding: 14px 22px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.clay-pill:hover, .glass-pill:hover {
  transform: translateY(-2px) !important;
  box-shadow: 10px 10px 24px rgba(0, 0, 0, 0.7), -6px -6px 18px rgba(255, 255, 255, 0.04), inset 4px 4px 8px rgba(255, 255, 255, 0.1), inset -4px -4px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Glowing Tactile Clay LED Dot */
.led-indicator, .hw-led-dot, .clay-led {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--rosehip-pink);
  box-shadow: 0 0 10px var(--rosehip-pink), inset 1px 1px 2px rgba(255, 255, 255, 0.6), inset -1px -1px 2px rgba(0, 0, 0, 0.4);
}

.clay-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--panel-elevated);
  color: var(--rosehip-pink);
  border: 1px solid rgba(234, 140, 159, 0.12);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5), -2px -2px 6px rgba(255, 255, 255, 0.02), inset 1px 1px 3px rgba(255, 255, 255, 0.1), inset -2px -2px 4px rgba(0, 0, 0, 0.4);
}

/* Typography & Text Accents */
h1 {
  text-shadow: 0 4px 20px var(--rosehip-glow) !important;
  color: var(--text-main) !important;
}

.login-text, h2, .section-title, .chapter-title, .title-accent {
  color: var(--rosehip-pink) !important;
}

.text-muted, .subtitle, .dimmed {
  color: var(--text-muted) !important;
}