/* ==========================================================================
   SubLingo Landing Page — Neomorphic Design System Overrides

   Strategy: Keep the deep-dark dramatic backgrounds intact.
   Adapt neomorphic shadows for dark mode using:
   - Stronger dark shadows (lower-right) for depth
   - Subtle rim-light highlights (upper-left) for tactile feel
   - Retain structural borders at reduced opacity where needed
   - Focus neomorphic effects on interactive/card components
   ========================================================================== */

/* ---- 1. Design Token Overrides ---- */
:root {
  /* Keep deep backgrounds, just warm slightly for shadow visibility */
  --sl-bg-deep: #080d18;
  --sl-bg-surface: #0e1525;
  --sl-bg-card: #141c2e;
  --sl-bg-card-hover: #1a2438;
  --sl-bg-overlay: rgba(8, 13, 24, 0.88);

  /* Softer borders (keep but reduce) */
  --sl-border: rgba(40, 60, 100, 0.35);

  /* Extension accent blue (richer, more vibrant) */
  --sl-accent-blue: #4A6CF7;
  --sl-accent-blue-dim: #3B5CE0;
  --sl-accent-blue-light: #6B8AFF;
  --sl-accent-emerald: #2ECC71;

  /* Dark-mode neomorphic shadows (tuned for very dark surfaces)
     - Dark shadow: deep black for strong depth
     - Light shadow: very subtle warm highlight for tactile rim-light */
  --sl-neo-raised: 6px 6px 16px rgba(0, 0, 0, 0.8),
                   -3px -3px 12px rgba(50, 65, 100, 0.12);
  --sl-neo-raised-sm: 3px 3px 10px rgba(0, 0, 0, 0.7),
                      -2px -2px 8px rgba(50, 65, 100, 0.10);
  --sl-neo-pressed: inset 3px 3px 8px rgba(0, 0, 0, 0.6),
                    inset -2px -2px 6px rgba(50, 65, 100, 0.08);
  --sl-neo-concave: inset 2px 2px 5px rgba(0, 0, 0, 0.5),
                    inset -1px -1px 4px rgba(50, 65, 100, 0.06);

  /* Enhanced glows (more visible on dark backgrounds) */
  --sl-glow-blue: 0 0 24px rgba(74, 108, 247, 0.25),
                  0 0 60px rgba(74, 108, 247, 0.08);
  --sl-glow-emerald: 0 0 20px rgba(46, 204, 113, 0.25),
                     0 0 60px rgba(46, 204, 113, 0.08);

  /* Slightly rounder radii */
  --sl-radius-sm: 8px;
  --sl-radius-md: 12px;
  --sl-radius-lg: 18px;
  --sl-radius-xl: 24px;
  --sl-radius-full: 100px;
}


/* ==========================================================================
   2. Navigation
   ========================================================================== */

.nav--scrolled {
  background: var(--sl-bg-overlay);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
              0 1px 0 rgba(50, 65, 100, 0.08);
}

.nav__logo {
  box-shadow: none;
}

.nav__cta {
  border: none;
  background: linear-gradient(135deg, var(--sl-accent-blue), var(--sl-accent-blue-dim));
  box-shadow: 0 4px 12px rgba(74, 108, 247, 0.35),
              0 0 0 1px rgba(74, 108, 247, 0.2);
}

.nav__cta:hover {
  box-shadow: 0 6px 20px rgba(74, 108, 247, 0.45),
              0 0 0 1px rgba(74, 108, 247, 0.3),
              0 0 40px rgba(74, 108, 247, 0.12);
}


/* ==========================================================================
   3. Hero Section
   ========================================================================== */

.hero__badge {
  border: 1px solid rgba(74, 108, 247, 0.15);
  box-shadow: var(--sl-neo-concave);
  background: rgba(74, 108, 247, 0.06);
}

.hero__browser {
  border: 1px solid rgba(50, 65, 100, 0.2);
  box-shadow: var(--sl-neo-raised),
              0 0 80px rgba(74, 108, 247, 0.06);
}

.hero__browser-url {
  box-shadow: var(--sl-neo-concave);
}


/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn--primary {
  border: none;
  box-shadow: 0 4px 14px rgba(74, 108, 247, 0.35),
              0 0 0 1px rgba(74, 108, 247, 0.15);
}

.btn--primary:hover {
  box-shadow: 0 8px 24px rgba(74, 108, 247, 0.4),
              0 0 0 1px rgba(74, 108, 247, 0.25),
              0 0 50px rgba(74, 108, 247, 0.1);
}

.btn--primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 6px rgba(74, 108, 247, 0.3),
              inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn--ghost {
  border: 1px solid rgba(50, 65, 100, 0.3);
  background: rgba(14, 21, 37, 0.6);
  box-shadow: var(--sl-neo-raised-sm);
}

.btn--ghost:hover {
  border-color: rgba(74, 108, 247, 0.2);
  background: rgba(20, 28, 46, 0.8);
  box-shadow: var(--sl-neo-raised),
              0 0 20px rgba(74, 108, 247, 0.06);
}

.btn--ghost:active {
  box-shadow: var(--sl-neo-pressed);
  border-color: rgba(50, 65, 100, 0.2);
}


/* ==========================================================================
   5. Section Shared
   ========================================================================== */

.section__label {
  border: 1px solid rgba(74, 108, 247, 0.12);
  box-shadow: var(--sl-neo-concave);
}


/* ==========================================================================
   6. Features Section
   ========================================================================== */

.feat-text__icon {
  box-shadow: var(--sl-neo-raised-sm);
  border: 1px solid rgba(50, 65, 100, 0.15);
}

.feat-panels {
  border: 1px solid rgba(50, 65, 100, 0.2);
  box-shadow: var(--sl-neo-raised),
              0 0 60px rgba(74, 108, 247, 0.03);
}

/* Progress dots */
.feat-dot {
  box-shadow: var(--sl-neo-raised-sm);
}

.feat-dot--active {
  box-shadow: 0 0 12px rgba(74, 108, 247, 0.5),
              var(--sl-neo-raised-sm);
}

/* Tags */
.tag {
  box-shadow: var(--sl-neo-concave);
}


/* ==========================================================================
   7. Feature Panel Mockups
   ========================================================================== */

.fp-browser {
  border: 1px solid rgba(50, 65, 100, 0.2);
  box-shadow: var(--sl-neo-raised);
}

.fp-browser__url {
  box-shadow: var(--sl-neo-concave);
}

/* Vocab cards */
.fp-vocab__card {
  border: 1px solid rgba(50, 65, 100, 0.15);
  box-shadow: var(--sl-neo-raised-sm);
}

.fp-vocab__card--active {
  border-color: rgba(74, 108, 247, 0.25);
  box-shadow: var(--sl-neo-raised-sm),
              0 0 16px rgba(74, 108, 247, 0.1);
}

/* Detail card */
.fp-detail {
  border: 1px solid rgba(50, 65, 100, 0.2);
  box-shadow: var(--sl-neo-raised);
}

.fp-detail__close-btn {
  box-shadow: var(--sl-neo-raised-sm);
}

.fp-detail__img {
  box-shadow: var(--sl-neo-pressed);
}

.fp-detail__img-btn {
  box-shadow: var(--sl-neo-raised-sm);
}

.fp-detail__action-btn {
  box-shadow: var(--sl-neo-raised-sm);
}

.fp-detail__cancel-btn {
  box-shadow: var(--sl-neo-raised-sm);
}

.fp-detail__save-btn {
  box-shadow: 0 3px 10px rgba(74, 108, 247, 0.35);
}

/* Exercise panel */
.fp-exercise__progress {
  box-shadow: var(--sl-neo-concave);
}

.fp-exercise__prompt {
  border: 1px solid rgba(50, 65, 100, 0.15);
  box-shadow: var(--sl-neo-concave);
}

.fp-exercise__input {
  box-shadow: var(--sl-neo-pressed);
}

.fp-exercise__submit {
  box-shadow: 0 3px 10px rgba(74, 108, 247, 0.35);
}

/* Export panel */
.fp-export__fmt {
  box-shadow: var(--sl-neo-concave);
}

.fp-export__fmt--active {
  box-shadow: var(--sl-neo-raised-sm),
              0 0 8px rgba(74, 108, 247, 0.15);
}

.fp-export__input {
  box-shadow: var(--sl-neo-pressed);
}

.fp-export__cta {
  box-shadow: 0 3px 10px rgba(74, 108, 247, 0.35);
}


/* ==========================================================================
   8. How It Works — Step Cards
   ========================================================================== */

.step {
  border: 1px solid rgba(50, 65, 100, 0.2);
  box-shadow: var(--sl-neo-raised);
}

.step:hover {
  border-color: rgba(74, 108, 247, 0.2);
  box-shadow: var(--sl-neo-raised),
              var(--sl-glow-blue);
}

.step__icon-wrap {
  border: 1px solid rgba(74, 108, 247, 0.1);
  box-shadow: var(--sl-neo-raised-sm);
}


/* ==========================================================================
   9. Pricing Section
   ========================================================================== */

.pricing-card {
  border: 1px solid rgba(50, 65, 100, 0.2);
  box-shadow: var(--sl-neo-raised);
}

.pricing-card:hover {
  border-color: rgba(50, 65, 100, 0.3);
  box-shadow: var(--sl-neo-raised),
              0 8px 30px rgba(0, 0, 0, 0.3);
}

.pricing-card--premium {
  border-color: rgba(74, 108, 247, 0.25);
  box-shadow: var(--sl-neo-raised),
              0 0 60px rgba(74, 108, 247, 0.06);
}

.pricing-card--premium:hover {
  border-color: rgba(74, 108, 247, 0.4);
  box-shadow: var(--sl-neo-raised),
              var(--sl-glow-blue);
}

.pricing-card__popular {
  box-shadow: 0 4px 16px rgba(74, 108, 247, 0.4),
              0 0 0 1px rgba(74, 108, 247, 0.2);
}

.pricing-card__toggle {
  border: 1px solid rgba(50, 65, 100, 0.2);
  box-shadow: var(--sl-neo-pressed);
}

.pricing-toggle__btn--active {
  box-shadow: var(--sl-neo-raised-sm);
}

.pricing-card__badge {
  box-shadow: var(--sl-neo-concave);
}

/* Trust badges */
.trust-badge {
  border: 1px solid rgba(50, 65, 100, 0.2);
  box-shadow: var(--sl-neo-concave);
}

/* Pricing teaser (homepage) */
.pricing-teaser__col {
  border: 1px solid rgba(50, 65, 100, 0.2);
  box-shadow: var(--sl-neo-raised-sm);
}

.pricing-teaser__col--premium {
  border-color: rgba(74, 108, 247, 0.2);
  box-shadow: var(--sl-neo-raised-sm),
              0 0 40px rgba(74, 108, 247, 0.04);
}


/* ==========================================================================
   10. FAQ Section
   ========================================================================== */

.faq-item {
  border: 1px solid rgba(50, 65, 100, 0.2);
  border-left: 3px solid rgba(50, 65, 100, 0.15);
  box-shadow: var(--sl-neo-raised-sm);
}

.faq-item:hover {
  border-color: rgba(74, 108, 247, 0.15);
  border-left-color: rgba(74, 108, 247, 0.3);
  box-shadow: var(--sl-neo-raised);
}

.faq-item--open {
  border-color: rgba(74, 108, 247, 0.2);
  border-left-color: var(--sl-accent-blue);
  box-shadow: var(--sl-neo-raised),
              var(--sl-glow-blue);
}

.faq-item--open:hover {
  border-left-color: var(--sl-accent-blue);
}

/* Updated chevron colors */
.faq-item__question::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234a5f8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.faq-item--open .faq-item__question::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234A6CF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}


/* ==========================================================================
   11. Footer
   ========================================================================== */

.footer {
  border-top: 1px solid rgba(50, 65, 100, 0.15);
  box-shadow: inset 0 1px 0 rgba(50, 65, 100, 0.06);
}

.footer__logo {
  box-shadow: none;
}


/* ==========================================================================
   12. Install State Overrides
   ========================================================================== */

.btn--installed,
.btn--installed.btn--primary,
.btn--installed.btn--ghost {
  box-shadow: 0 4px 14px rgba(46, 204, 113, 0.3),
              0 0 0 1px rgba(46, 204, 113, 0.2) !important;
}

.btn--non-chrome,
.btn--non-chrome.btn--primary,
.btn--non-chrome.btn--ghost {
  box-shadow: var(--sl-neo-concave) !important;
}

.nav__cta--installed {
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3),
              0 0 0 1px rgba(46, 204, 113, 0.2) !important;
}

.nav__cta--non-chrome {
  box-shadow: var(--sl-neo-concave) !important;
}