/* ==========================================================================
   themes.css — extra theme polish, accents per page, “atmosphere”
   (Base theme variables live in base.css)
   ========================================================================== */

/* ------------------------------
   Page-level accent hints
------------------------------ */
.page-home       { --page-accent: var(--accent); }
.page-about      { --page-accent: var(--accent-3); }
.page-cats       { --page-accent: var(--accent); }
.page-declutter  { --page-accent: var(--accent-2); }
.page-decor      { --page-accent: var(--accent-3); }
.page-homecraft  { --page-accent: var(--accent-2); }
.page-recipes    { --page-accent: var(--accent); }
.page-tvcorner   { --page-accent: var(--accent-2); }
.page-garden     { --page-accent: var(--accent-3); }
.page-links      { --page-accent: var(--accent-2); }
.page-guestbook  { --page-accent: var(--accent); }
.page-updates    { --page-accent: var(--accent-3); }

/* ------------------------------
   Fallbacks (no color-mix support)
   These ensure the vibe still shows up everywhere.
------------------------------ */
.panel {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.02),
    0 0 0 7px var(--glow),
    var(--shadow-2);
}

.nav-link.is-here {
  box-shadow:
    0 0 0 3px var(--glow),
    0 1px 0 rgba(255,255,255,0.22);
}

/* ------------------------------
   Progressive enhancement if color-mix exists
------------------------------ */
@supports (color: color-mix(in srgb, #000 50%, transparent)) {
  /* Accent glow on panels (stronger, still tasteful) */
  .panel {
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.02),
      0 0 0 8px color-mix(in srgb, var(--page-accent) 14%, transparent),
      var(--shadow-2);
  }

  /* Nav “selected” polish */
  .nav-link.is-here {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--page-accent) 28%, transparent),
      0 1px 0 rgba(255,255,255,0.22);
  }

  body.theme-night-lamp .nav-link.is-here {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--page-accent) 34%, transparent);
  }
}

/* ------------------------------
   Header polish: “lamp glow”
------------------------------ */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* main lamp aura */
    radial-gradient(circle at 50% 0%,
      color-mix(in srgb, var(--page-accent) 22%, transparent),
      transparent 58%),
    /* gentle warm wash so the header doesn't feel flat */
    radial-gradient(circle at 30% 10%, rgba(255,255,255,0.12), transparent 52%),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,0.10), transparent 50%);
  opacity: 0.95;
}

/* If color-mix isn't supported, we still get a glow via base.css --wash and --glow.
   But we also provide a soft fallback for older browsers. */
@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
  .site-header::before {
    background:
      radial-gradient(circle at 50% 0%, var(--glow), transparent 58%),
      radial-gradient(circle at 30% 10%, rgba(255,255,255,0.12), transparent 52%),
      radial-gradient(circle at 80% 18%, rgba(255,255,255,0.10), transparent 50%);
  }
}

/* ------------------------------
   Active nav: make it feel like a badge (more visible)
------------------------------ */
.nav-link.is-here {
  border-color: var(--border-strong);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.34));
}

body.theme-night-lamp .nav-link.is-here {
  background: rgba(255,255,255,0.09);
}

/* Slightly more playful hover on nav links (still subtle) */
.nav-link:hover {
  border-color: rgba(0,0,0,0.10);
}

body.theme-night-lamp .nav-link:hover {
  border-color: rgba(255,255,255,0.14);
}

/* ------------------------------
   Fun tactile borders (retro vibe)
------------------------------ */
.header-frame,
.footer-frame,
.panel,
.card,
.micro-btn,
.note-card,
.callout {
  border-image-slice: 1;
  /* A “soft doodle” effect: keep it understated */
}

/* Tiny “bead” corners on frames */
.header-frame,
.footer-frame {
  position: relative;
}

.header-frame::before,
.footer-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--r-3) - 8px);
  border: 1px dotted rgba(0,0,0,0.10);
  pointer-events: none;
}

body.theme-night-lamp .header-frame::before,
body.theme-night-lamp .footer-frame::before {
  border-color: rgba(255,255,255,0.14);
}

/* ------------------------------
   Panel header “tab chip” + accent underline
   (adds energy without changing layout)
------------------------------ */
.panel-h {
  position: relative;
}

.panel-h::after {
  /* accent underline */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--page-accent) 55%, transparent),
    transparent
  );
  opacity: 0.8;
  pointer-events: none;
}

@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
  .panel-h::after {
    background: linear-gradient(90deg, transparent, var(--glow), transparent);
  }
}

/* little “label tab” dot on the left for extra retro UI */
.panel-h::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--page-accent);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.22);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.85;
  pointer-events: none;
}

/* Ensure titles/icons don’t collide with the chip */
.panel-title {
  padding-left: 10px;
}

/* ------------------------------
   “Tacky but lovable” micro-textures
------------------------------ */
.panel-h {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.34), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.30));
}

body.theme-night-lamp .panel-h {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10), transparent 55%),
    rgba(255,255,255,0.07);
}

/* ------------------------------
   Extra pop on hover for cards + micro buttons
------------------------------ */
@supports (color: color-mix(in srgb, #000 50%, transparent)) {
  .card:hover,
  .micro-btn:hover {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--page-accent) 18%, transparent),
      var(--shadow-2);
  }
}

@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
  .card:hover,
  .micro-btn:hover {
    box-shadow:
      0 0 0 4px var(--glow),
      var(--shadow-2);
  }
}

/* ------------------------------
   Decorative emphasis helpers
------------------------------ */
.panel-title .icon {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.25));
}

body.theme-night-lamp .panel-title .icon {
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.40));
}

/* ------------------------------
   Optional: “Calm mode” class toggle
   (Your JS can add .is-calm on body)
------------------------------ */
body.is-calm * {
  animation: none !important;
  transition-duration: 0ms !important;
}

body.is-calm .site-header::before {
  opacity: 0.55;
}

/* ------------------------------
   Optional: tiny blink for “vibes”
   (Respects reduced motion; can be used on small ornaments if desired)
------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .brand-dot {
    animation: vibe-pulse 3.6s var(--ease) infinite;
  }

  @keyframes vibe-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: 0.85; }
  }
}