/* ==========================================================================
   Theme layer – light (default) & dark mode
   Loaded AFTER style.css, style-v2.css, style-v2-subtle.css to override.
   ========================================================================== */

/* ── Custom properties ── */
:root {
  --bg:              #f8f9fb;
  --bg-elevated:     #f0f1f3;
  --bg-input:        #ffffff;
  --bg-card:         #ffffff;
  --bg-card-hover:   #fafafa;

  --text:            #111111;
  --text-secondary:  #444444;
  --text-muted:      #636363;
  --text-faint:      #868686;
  --text-placeholder: #9a9a9a;

  --border:          rgba(0, 0, 0, 0.10);
  --border-strong:   rgba(0, 0, 0, 0.18);
  --border-subtle:   rgba(0, 0, 0, 0.06);

  --nav-bg:          rgba(255, 255, 255, 0.85);
  --nav-mobile-bg:   rgba(255, 255, 255, 0.97);

  --accent:          #6366f1;
  --accent-subtle:   rgba(99, 102, 241, 0.08);

  --btn-primary-bg:  #111111;
  --btn-primary-fg:  #ffffff;
  --btn-primary-hover: #333333;

  --btn-outline-fg:  #111111;
  --btn-outline-border: rgba(0, 0, 0, 0.20);
  --btn-outline-hover-border: rgba(0, 0, 0, 0.40);
  --btn-outline-hover-bg: rgba(0, 0, 0, 0.04);

  --btn-cta-bg:      #111111;
  --btn-cta-fg:      #ffffff;
  --btn-cta-hover-bg: #333333;
  --btn-cta-glow:    rgba(99, 102, 241, 0.25);
  --btn-cta-glow-hover: rgba(99, 102, 241, 0.40);

  --card-shadow:     0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);

  --aurora-opacity:  0.25;

  --pricing-badge-bg: var(--accent);
  --pricing-badge-fg: #ffffff;
  --featured-bg:     #eeebff;
  --featured-border: rgba(99, 102, 241, 0.30);

  --shimmer-mid:     rgba(255,255,255,0.35);
  --shimmer-edge:    rgba(255,255,255,0.06);

  --toggle-bg:       #e4e4e7;
  --toggle-fg:       #18181b;

  --section-alt-bg:  #f1f2f5;
  --cta-bg:          linear-gradient(180deg, #eeedf8 0%, #f8f9fb 100%);
  --footer-bg:       #f1f2f5;
}

[data-theme="dark"] {
  --bg:              #000000;
  --bg-elevated:     #0a0a0a;
  --bg-input:        #0a0a0a;
  --bg-card:         rgba(255, 255, 255, 0.02);
  --bg-card-hover:   rgba(255, 255, 255, 0.04);

  --text:            #ffffff;
  --text-secondary:  #aaaaaa;
  --text-muted:      #888888;
  --text-faint:      #666666;
  --text-placeholder: #555555;

  --border:          rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.18);
  --border-subtle:   rgba(255, 255, 255, 0.05);

  --nav-bg:          rgba(0, 0, 0, 0.85);
  --nav-mobile-bg:   rgba(0, 0, 0, 0.95);

  --accent:          #818cf8;
  --accent-subtle:   rgba(129, 140, 248, 0.10);

  --btn-primary-bg:  #ffffff;
  --btn-primary-fg:  #000000;
  --btn-primary-hover: #e0e0e0;

  --btn-outline-fg:  #ffffff;
  --btn-outline-border: rgba(255, 255, 255, 0.25);
  --btn-outline-hover-border: rgba(255, 255, 255, 0.5);
  --btn-outline-hover-bg: rgba(255, 255, 255, 0.05);

  --btn-cta-bg:      #ffffff;
  --btn-cta-fg:      #000000;
  --btn-cta-hover-bg: #e0e0e0;
  --btn-cta-glow:    rgba(255, 255, 255, 0.08);
  --btn-cta-glow-hover: rgba(255, 255, 255, 0.15);

  --card-shadow:     none;
  --card-shadow-hover: none;

  --aurora-opacity:  0.26;

  --pricing-badge-bg: #ffffff;
  --pricing-badge-fg: #000000;
  --featured-bg:     rgba(255, 255, 255, 0.05);
  --featured-border: rgba(255, 255, 255, 0.30);

  --shimmer-mid:     rgba(255,255,255,1);
  --shimmer-edge:    rgba(0,0,0,0.08);

  --toggle-bg:       #27272a;
  --toggle-fg:       #fafafa;

  --section-alt-bg:  transparent;
  --cta-bg:          transparent;
  --footer-bg:       transparent;
}

/* ── Base ── */
body {
  background: var(--bg);
  color: var(--text);
}

/* ── Navbar ── */
.nav {
  background: var(--nav-bg);
  border-bottom-color: var(--border);
}

.nav-links a {
  color: var(--text-secondary);
}

.nav-links a:hover {
  color: var(--text);
}

.nav-hamburger span {
  background: var(--text);
}

/* ── Buttons ── */
.btn-primary,
.nav-links a.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.btn-primary:hover,
.nav-links a.btn-primary:hover {
  background: var(--btn-primary-hover);
  color: var(--btn-primary-fg);
}

.btn-outline {
  color: var(--btn-outline-fg);
  border-color: var(--btn-outline-border);
}

.btn-outline:hover {
  border-color: var(--btn-outline-hover-border);
  background: var(--btn-outline-hover-bg);
}

/* ── Hero ── */
.hero-v2 h1 {
  color: var(--text);
}

.hero p {
  color: var(--text-muted);
}

.hero-badge {
  color: var(--text-secondary);
  border-color: var(--border);
}

.aurora-blob {
  opacity: var(--aurora-opacity);
}

:root .aurora-1 {
  background: radial-gradient(circle, #a5b4fc 0%, transparent 70%);
}

:root .aurora-2 {
  background: radial-gradient(circle, #c4b5fd 0%, transparent 70%);
}

:root .aurora-3 {
  background: radial-gradient(circle, #93c5fd 0%, transparent 70%);
}

[data-theme="dark"] .aurora-1 {
  background: radial-gradient(circle, #6366f1 0%, transparent 70%);
}

[data-theme="dark"] .aurora-2 {
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
}

[data-theme="dark"] .aurora-3 {
  background: radial-gradient(circle, #818cf8 0%, transparent 70%);
}

/* ── Hero form ── */
.hero-prompt-wrap {
  background: var(--bg-input);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.hero-prompt-wrap:focus-within {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 2px 16px rgba(99, 102, 241, 0.12), 0 0 0 4px var(--accent-subtle);
}

[data-theme="dark"] .hero-prompt-wrap {
  border-color: var(--border);
  border-top: 1px solid var(--border);
  box-shadow: none;
}

[data-theme="dark"] .hero-prompt-wrap:focus-within {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.03);
}

.hero-prompt-wrap textarea {
  color: var(--text);
}

.hero-prompt-wrap textarea::placeholder {
  color: var(--text-placeholder);
}

.example-label {
  color: var(--text-faint);
}

.example-chip {
  color: var(--text-secondary);
  background: var(--accent-subtle);
  border: 1px solid rgba(99, 102, 241, 0.12);
}

.example-chip:hover {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.25);
}

[data-theme="dark"] .example-chip {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .example-chip:hover {
  color: #ccc;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.phone-prefix {
  background: var(--bg-elevated);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text-faint);
}

.phone-input-wrap {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.phone-input-wrap input {
  background: var(--bg-input);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text);
}

[data-theme="dark"] .phone-prefix {
  border-color: var(--border);
}

[data-theme="dark"] .phone-input-wrap {
  box-shadow: none;
}

[data-theme="dark"] .phone-input-wrap input {
  border-color: var(--border);
}

.phone-input-wrap input::placeholder {
  color: var(--text-placeholder);
}

.phone-input-wrap input:focus {
  border-color: rgba(99, 102, 241, 0.4);
}

.phone-input-wrap:focus-within {
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.phone-input-wrap:focus-within .phone-prefix {
  border-color: rgba(99, 102, 241, 0.4);
}

.btn-cta {
  background: var(--btn-cta-bg);
  color: var(--btn-cta-fg);
  box-shadow:
    0 0 20px var(--btn-cta-glow),
    0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn-cta:hover {
  background: var(--btn-cta-hover-bg);
  box-shadow:
    0 0 32px var(--btn-cta-glow-hover),
    0 0 60px var(--btn-cta-glow),
    0 1px 3px rgba(0, 0, 0, 0.12);
}

.btn-cta-shimmer {
  background: linear-gradient(
    105deg,
    transparent 0%,
    var(--shimmer-edge) 35%,
    var(--shimmer-mid) 50%,
    var(--shimmer-edge) 65%,
    transparent 100%
  );
  animation: shimmer-slow 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes shimmer-slow {
  0%   { left: -100%; }
  20%  { left: 160%; }
  100% { left: 160%; }
}

.hero-form-note {
  color: var(--text-faint);
}

/* ── Social proof ── */
.social-proof {
  border-top-color: var(--border-subtle);
  border-bottom-color: var(--border-subtle);
  background: var(--section-alt-bg);
}

.proof-number {
  color: var(--text);
}

.proof-label {
  color: var(--text-faint);
}

.proof-divider {
  background: var(--border);
}

/* ── Demo mockup ── */
.demo-window {
  border-color: var(--border);
  background: var(--bg-card);
  box-shadow: var(--card-shadow);
}

[data-theme="dark"] .demo-window {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.demo-toolbar {
  border-bottom-color: var(--border-subtle);
}

.demo-toolbar-dots span {
  background: var(--border);
}

.demo-toolbar-title {
  color: var(--text-faint);
}

.demo-status {
  color: var(--text-muted);
  border-bottom-color: var(--border-subtle);
}

.demo-msg-label {
  color: var(--text-faint);
}

.demo-msg-jp {
  color: var(--text-secondary);
}

.demo-msg-en {
  color: var(--text-muted);
}

.demo-msg-other .demo-msg-label {
  color: var(--accent);
}

.demo-typing-indicator span {
  background: var(--text-faint);
}

/* ── Carousel dots ── */
.carousel-dot {
  background: var(--border);
}

.carousel-dot.active {
  background: var(--text-muted);
}

/* ── Trust badges ── */
.trust-badge {
  color: var(--text-muted);
}

.trust-badge-sep {
  background: var(--border);
}

/* ── Testimonials ── */
.testimonial-card {
  border-color: var(--border);
  background: var(--bg-card);
  box-shadow: var(--card-shadow);
}

.testimonial-text {
  color: var(--text-muted);
}

.testimonial-avatar {
  background: var(--accent-subtle);
  color: var(--accent);
}

[data-theme="dark"] .testimonial-avatar {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.testimonial-author {
  color: var(--text);
}

.testimonial-role {
  color: var(--text-faint);
}

.testimonial-dot {
  background: var(--border);
}

.testimonial-dot.active {
  background: var(--text-muted);
}

/* ── Section shared ── */
.section-label {
  color: var(--accent);
  letter-spacing: 0.1em;
}

[data-theme="dark"] .section-label {
  color: var(--text-faint);
}

.section-heading {
  color: var(--text);
}

.section-subtext {
  color: var(--text-muted);
}

/* ── Alternating section backgrounds ── */
.features,
.how-it-works,
.use-cases,
.pricing,
.faq,
.cta,
.footer {
  border-top-color: var(--border);
}

.how-it-works {
  background: var(--section-alt-bg);
}

.pricing {
  background: var(--section-alt-bg);
}

/* ── Bottom CTA ── */
.cta {
  background: var(--cta-bg);
}

/* ── Footer ── */
.footer {
  background: var(--footer-bg);
  border-top-color: var(--border);
}

/* ── Cards (features, use-cases, pricing) ── */
.feature-card,
.use-case-card {
  border-color: var(--border);
  background: var(--bg-card);
  box-shadow: var(--card-shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.feature-card:hover,
.use-case-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--card-shadow-hover);
}

.feature-icon {
  background: var(--accent-subtle);
}

[data-theme="dark"] .feature-icon {
  background: var(--bg-elevated);
}

.feature-card p,
.use-case-card > p {
  color: var(--text-muted);
}

.use-case-example {
  color: var(--text-faint);
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
  border-left-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .use-case-example {
  border-left-color: var(--border-strong);
}

/* ── How it works ── */
.step-number {
  border: 2px solid rgba(99, 102, 241, 0.3);
  color: var(--accent);
  background: var(--accent-subtle);
}

[data-theme="dark"] .step-number {
  border-color: var(--border-strong);
  color: var(--text);
  background: transparent;
}

.step p {
  color: var(--text-muted);
}

/* ── Pricing ── */
.pricing-card {
  border-color: var(--border);
  background: var(--bg-card);
  box-shadow: var(--card-shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pricing-card.featured {
  border-color: var(--featured-border);
  background: var(--featured-bg);
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.12), 0 0 0 1px var(--featured-border);
}

[data-theme="dark"] .pricing-card.featured {
  box-shadow: none;
}

.pricing-popular {
  color: var(--pricing-badge-fg);
  background: var(--pricing-badge-bg);
}

.pricing-period {
  color: var(--text-faint);
}

.pricing-features li {
  color: var(--text-secondary);
  border-bottom-color: var(--border-subtle);
}

.pricing-features li::before {
  color: var(--text-faint);
}

:root .pricing-features li::before {
  content: "\2713";
  color: var(--accent);
  font-weight: 600;
}

/* ── FAQ ── */
.faq-item {
  border-bottom-color: var(--border);
}

.faq-item summary {
  color: var(--text-secondary);
}

.faq-item summary:hover {
  color: var(--text);
}

.faq-item summary::after {
  color: var(--text-faint);
}

.faq-item p {
  color: var(--text-muted);
}

/* ── Footer ── */
.footer-desc {
  color: var(--text-muted);
}

.footer-contact {
  color: var(--text-faint);
}

.footer-contact:hover {
  color: var(--text);
}

.footer-col-title {
  color: var(--text-secondary);
}

.footer-col a {
  color: var(--text-faint);
}

.footer-col a:hover {
  color: var(--text);
}

.footer-bottom {
  border-top-color: var(--border);
}

.footer-copy {
  color: var(--text-placeholder);
}

/* ── Mobile nav ── */
@media (max-width: 768px) {
  .nav-links {
    background: var(--nav-mobile-bg);
    border-bottom-color: var(--border);
  }
}

/* ==========================================================================
   Theme toggle button
   ========================================================================== */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--toggle-bg);
  color: var(--toggle-fg);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}

.theme-toggle:hover {
  border-color: var(--border-strong);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
}

:root .theme-toggle .icon-moon {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* Mobile: show toggle next to hamburger, not inside nav-links */
.nav-toggle-mobile {
  display: none;
}

@media (max-width: 768px) {
  .nav-links .theme-toggle {
    display: none;
  }

  .nav-toggle-mobile {
    display: flex;
  }
}

/* ==========================================================================
   Smooth theme transition (applied briefly via JS)
   ========================================================================== */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 0.35s ease,
              color 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              opacity 0.35s ease !important;
}