/* ============================================================
   The Inner Library — stylesheet (V1 scaffold)
   ------------------------------------------------------------
   Aesthetic direction: cozy gamer pixel scrapbook
   (Stardew Valley / Harvest Moon / Unpacking vibe).

   This file sets up:
     1. Font families (pixel heading + soft body)
     2. Seasonal palettes (soft spring/summer/autumn/winter)
     3. Life Goal domain colors (8 books)
     4. A few baseline styles for the scaffold screen

   Seasonal palette is driven by `data-season` on #app.
   ============================================================ */


/* 1. Life Goal book colors (stable across all seasons) */
:root {
  --goal-physical-health:  #e9b0a8;   /* soft red     */
  --goal-mental-health:    #b3c7e6;   /* soft blue    */
  --goal-finances:         #e8cf8a;   /* soft gold    */
  --goal-personal-care:    #e8b9c4;   /* soft rose    */
  --goal-home-care:        #d4b896;   /* warm tan */
  --goal-human-connection: #edc3a0;   /* soft orange  */
  --goal-creative:         #c8b5d6;   /* soft purple  */
  --goal-nutrition:        #b8ccae;   /* soft sage    */

  /* Wooden shelf — same across all seasons for a consistent library feel */
  --shelf-wood:       #c9a274;   /* warm pine/oak tone      */
  --shelf-wood-dark:  #8a6239;   /* grain shadow / edge     */
}


/* 2. Seasonal palettes — applied via [data-season="..."] on #app */

/* Soft Spring — dusty rose (hero) + fresh-leaf green accent.
   Life-goal spines lean fresh and pastel — close to the defaults.
   Decor objects stay close to their baseline colors. */
#app[data-season="spring"] {
  --bg:        #dfbac1;   /* pale dusty rose */
  --bg-page:   #f7efd9;   /* cream book-page — same across all seasons */
  --ink:       #3a2432;
  --ink-soft:  #3a2432;   /* matched to --ink so all text reads dark */
  --accent:    #d08a99;   /* deeper dusty rose */
  --highlight: #9ecb8a;   /* fresh green leaf  */

  --goal-physical-health:  #edbab2;
  --goal-mental-health:    #b8cdec;
  --goal-finances:         #e7cc84;
  --goal-personal-care:    #ecc2cc;
  --goal-home-care:        #d9be9c;
  --goal-human-connection: #eecaa8;
  --goal-creative:         #ceb8dc;
  --goal-nutrition:        #bdd0ae;

  --plant-leaf:        #7fa764;
  --plant-leaf-center: #8cb870;
  --plant-pot:         linear-gradient(to bottom, #c37a5a 0%, #b26b4d 60%, #8f5238 100%);
  --plant-pot-rim:     #8f5238;
  --pencup-bg:         linear-gradient(to bottom, #d6dee8 0%, #b9c4d2 100%);
  --mug-bg:            #c4887a;
  --jar-lid:           #6d9bc7;
  --jar-body:          #a8c5dc;
  --candle-body-bg:    linear-gradient(to bottom, #e8d4b2 0%, #d6bf99 100%);
  --globe-water:       radial-gradient(circle at 30% 30%, #bfe0ee 0%, #86bad2 55%, #4f8ba6 100%);
  --globe-land:        #7fa764;
}

/* Soft Summer — dusty sky blue (hero) + yellow/orange accents.
   Life-goal spines warm up slightly, as if sun-kissed. Decor leans
   warm and sun-baked — plants a touch brighter, mug deeper terracotta. */
#app[data-season="summer"] {
  --bg:        #b9ccdc;   /* dusty sky blue     */
  --bg-page:   #f7efd9;   /* cream book-page — same across all seasons */
  --ink:       #2d3a48;
  --ink-soft:  #2d3a48;   /* matched to --ink so all text reads dark */
  --accent:    #f4b878;   /* soft orange accent */
  --highlight: #ffde8a;   /* warm yellow accent */

  --goal-physical-health:  #eaa89a;
  --goal-mental-health:    #a5c2e6;
  --goal-finances:         #eccb78;
  --goal-personal-care:    #e8a9b8;
  --goal-home-care:        #d6ad7e;
  --goal-human-connection: #f0b98c;
  --goal-creative:         #c7a8d4;
  --goal-nutrition:        #b0c698;

  --plant-leaf:        #8ab367;
  --plant-leaf-center: #9bc272;
  --plant-pot:         linear-gradient(to bottom, #c87b5a 0%, #b26b4d 60%, #8f5238 100%);
  --plant-pot-rim:     #8f5238;
  --pencup-bg:         linear-gradient(to bottom, #dde3ea 0%, #bfc9d4 100%);
  --mug-bg:            #d19079;
  --jar-lid:           #6ea5d0;
  --jar-body:          #b3d0e4;
  --candle-body-bg:    linear-gradient(to bottom, #ecd5af 0%, #d8bd91 100%);
  --globe-water:       radial-gradient(circle at 30% 30%, #c9e6f0 0%, #7eb8d5 55%, #4589a5 100%);
  --globe-land:        #8ab367;
}

/* Soft Autumn — soft mustard (hero) + rust-red + forest-green leaves.
   Life-goal spines pull dustier, with amber/rust undertones. Decor
   dusts over with olive, aged terracotta, candlelit amber. */
#app[data-season="autumn"] {
  --bg:        #c4ad7a;   /* dusty mustard      */
  --bg-page:   #f7efd9;   /* cream book-page — same across all seasons */
  --ink:       #3e2a20;
  --ink-soft:  #3e2a20;   /* matched to --ink so all text reads dark */
  --accent:    #b3533a;   /* deep rust red-leaf — pops against mustard */
  --highlight: #7d9a5e;   /* forest green       */

  --goal-physical-health:  #d99b8e;
  --goal-mental-health:    #a4b3c8;
  --goal-finances:         #d6ba6f;
  --goal-personal-care:    #d9a5ac;
  --goal-home-care:        #c19e7a;
  --goal-human-connection: #d9a47e;
  --goal-creative:         #b299b9;
  --goal-nutrition:        #a3ab8a;

  --plant-leaf:        #9b9e58;
  --plant-leaf-center: #acae65;
  --plant-pot:         linear-gradient(to bottom, #b46a52 0%, #9a5641 60%, #7a4028 100%);
  --plant-pot-rim:     #7a4028;
  --pencup-bg:         linear-gradient(to bottom, #ccd1d7 0%, #a8b0ba 100%);
  --mug-bg:            #b3725f;
  --jar-lid:           #7e92a8;
  --jar-body:          #b5c2cd;
  --candle-body-bg:    linear-gradient(to bottom, #dbc598 0%, #c4b07f 100%);
  --globe-water:       radial-gradient(circle at 30% 30%, #c6d8e0 0%, #7ca5b8 55%, #466d84 100%);
  --globe-land:        #8a8c50;
}

/* Soft Winter — soft purple/lavender (hero) + icy blue accent.
   Life-goal spines cool and desaturate — almost frost-kissed. Decor
   cools: sage-frost leaves, dusky-rose mug, icy-blue jar and globe. */
#app[data-season="winter"] {
  --bg:        #c5bcd4;   /* pale dusty lavender hero */
  --bg-page:   #f7efd9;   /* cream book-page — same across all seasons */
  --ink:       #2e2446;
  --ink-soft:  #2e2446;   /* matched to --ink so all text reads dark */
  --accent:    #6e57b0;   /* richer purple — pops against pale lavender */
  --highlight: #7ea0c5;   /* icy blue accent           */

  --goal-physical-health:  #d4a5a5;
  --goal-mental-health:    #b9cad8;
  --goal-finances:         #d4c299;
  --goal-personal-care:    #d9b3c0;
  --goal-home-care:        #c0ae94;
  --goal-human-connection: #d5b39a;
  --goal-creative:         #b7a8c7;
  --goal-nutrition:        #b0b8a2;

  --plant-leaf:        #6e8f64;
  --plant-leaf-center: #83a178;
  --plant-pot:         linear-gradient(to bottom, #a96e5c 0%, #8f553f 60%, #6d3a2a 100%);
  --plant-pot-rim:     #6d3a2a;
  --pencup-bg:         linear-gradient(to bottom, #d5dde8 0%, #b0bccc 100%);
  --mug-bg:            #bd8b87;
  --jar-lid:           #7395b7;
  --jar-body:          #b6c9dc;
  --candle-body-bg:    linear-gradient(to bottom, #e3cfa8 0%, #cfb791 100%);
  --globe-water:       radial-gradient(circle at 30% 30%, #c4d9e4 0%, #7da3bb 55%, #4d7ea0 100%);
  --globe-land:        #7d9485;
}


/* ==========================================================
   Falling decoration — 00s-style drifting particles layer.
   One container, many styles. JS creates particles with the
   class `.falling-particle--<style>`. Each style's look is
   defined below; all share a common fall (or rise) animation.
   pointer-events: none so the app stays fully interactive.
   ========================================================== */
.falling-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 50;
}
.falling-layer--off { display: none; }
@media (prefers-reduced-motion: reduce) {
  .falling-layer { display: none; }
}

.falling-particle {
  --color: #ff8fc5;
  --drift: 0vw;
  position: absolute;
  top: -10vh;
  opacity: 0;
  animation: falling-fall linear infinite;
  will-change: transform, opacity;
  display: inline-block;
  text-align: center;
  user-select: none;
}

/* Default: drift from above the viewport to below it, rotating. */
@keyframes falling-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg);                   opacity: 0; }
  8%   { opacity: 0.95; }
  50%  { transform: translate3d(var(--drift), 60vh, 0) rotate(540deg);   opacity: 0.95; }
  92%  { opacity: 0.95; }
  100% { transform: translate3d(0, 120vh, 0) rotate(1080deg);            opacity: 0; }
}

/* Rising variant for styles that float up (bubbles, fireflies). */
@keyframes falling-rise {
  0%   { transform: translate3d(0, 120vh, 0) rotate(0deg);               opacity: 0; }
  8%   { opacity: 0.95; }
  50%  { transform: translate3d(var(--drift), 60vh, 0) rotate(180deg);   opacity: 0.95; }
  92%  { opacity: 0.95; }
  100% { transform: translate3d(0, 0, 0) rotate(360deg);                 opacity: 0; }
}

/* Soft twinkle for fireflies/stars (layered over the fall animation). */
@keyframes falling-flicker {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.6); }
}

/* --- Per-style visuals ---------------------------------------- */

/* Glitter — sparkly dots with a color glow. */
.falling-particle--glitter {
  background: var(--color);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--color), 0 0 12px var(--color);
}

/* Petals — CSS droplet shape. */
.falling-particle--petals {
  background: var(--color);
  border-radius: 80% 20% 80% 20% / 80% 20% 80% 20%;
  box-shadow: 0 0 2px rgba(0,0,0,0.15);
}

/* Fireflies — rise upward and flicker. */
.falling-particle--fireflies {
  background: var(--color);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color), 0 0 18px var(--color);
  animation-name: falling-rise;
}

/* Leaves, hearts, sparkles, notes — text-based (emoji/unicode). */
.falling-particle--leaves,
.falling-particle--hearts,
.falling-particle--sparkles,
.falling-particle--notes {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  background: transparent;
}
.falling-particle--hearts { color: var(--color); }
.falling-particle--notes  { color: var(--color); font-weight: 700; }

/* Snow — soft white flakes with a light glow. */
.falling-particle--snow {
  color: var(--color, #ffffff);
  text-shadow: 0 0 4px rgba(255,255,255,0.75);
  background: transparent;
}

/* Stars — gold/white with a subtle glow. */
.falling-particle--stars {
  color: var(--color);
  text-shadow: 0 0 6px var(--color);
  background: transparent;
}

/* Bubbles — hollow spheres that rise. */
.falling-particle--bubbles {
  background: radial-gradient(circle at 30% 30%,
                              rgba(255,255,255,0.9),
                              var(--color) 55%,
                              rgba(255,255,255,0.18) 90%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.65);
  animation-name: falling-rise;
}

/* Confetti — small colored rectangles. */
.falling-particle--confetti {
  background: var(--color);
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

/* Rain — thin blue-grey streaks, no spin. */
.falling-particle--rain {
  background: linear-gradient(to bottom, transparent, var(--color));
  border-radius: 1px;
}
@keyframes falling-rain {
  0%   { transform: translate3d(0, 0, 0);    opacity: 0; }
  10%  { opacity: 0.8; }
  100% { transform: translate3d(var(--drift), 120vh, 0); opacity: 0.8; }
}
.falling-particle--rain { animation-name: falling-rain; }

/* Book pages — cream rectangles that flutter. */
.falling-particle--pages {
  background: var(--color);
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.18);
}


/* ==========================================================
   Cursor sparkle trail — tiny glyphs bloom where the cursor
   moves and fade out after ~0.7s. Toggled via
   state.settings.cursorSparkle (see js/sparkle-trail.js).
   ========================================================== */
.cursor-sparkle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 60;                       /* above the falling layer */
}
.cursor-sparkle {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: 'Pixelify Sans', 'Segoe UI Symbol', sans-serif;
  line-height: 1;
  pointer-events: none;
  animation: cursor-sparkle-fade 0.7s ease-out forwards;
  will-change: transform, opacity;
}
/* Shape-based variants (bubbles, rainbow dots) are non-text, so no
   font rendering needed — JS sets width/height/background directly. */
.cursor-sparkle--bubble,
.cursor-sparkle--dot {
  border-radius: 50%;
  line-height: 0;
}
@keyframes cursor-sparkle-fade {
  0%   { transform: translate(-50%, -50%) scale(0.4) rotate(0);       opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.1) rotate(calc(var(--rot) * 0.4)); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--drift)), calc(-50% - 16px))
               scale(0.2) rotate(var(--rot));
    opacity: 0;
  }
}

/* Burst variant — shoots outward from the click point instead of
   drifting upward. JS sets --burst-x / --burst-y per particle. */
.cursor-sparkle--burst {
  animation: cursor-sparkle-burst 0.65s ease-out forwards;
}
@keyframes cursor-sparkle-burst {
  0%   { transform: translate(-50%, -50%) scale(0.3) rotate(0); opacity: 0; }
  15%  { transform: translate(-50%, -50%) scale(1.2) rotate(calc(var(--rot) * 0.3)); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y)))
               scale(0.2) rotate(var(--rot));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-sparkle-layer { display: none; }
}


/* ==========================================================
   Page-flip transition for the corner season switcher. Uses
   the View Transitions API — only fires when the user cycles
   seasons from the home corner. data-season-flip on <html> is
   toggled by the click handler so these rules scope to that
   specific transition and don't affect other renders.
   ========================================================== */
@keyframes season-flip-out-next {
  to { opacity: 0; transform: perspective(1200px) rotateY(-14deg) translateX(-28px); }
}
@keyframes season-flip-in-next {
  from { opacity: 0; transform: perspective(1200px) rotateY(14deg) translateX(28px); }
}
@keyframes season-flip-out-prev {
  to { opacity: 0; transform: perspective(1200px) rotateY(14deg) translateX(28px); }
}
@keyframes season-flip-in-prev {
  from { opacity: 0; transform: perspective(1200px) rotateY(-14deg) translateX(-28px); }
}
html[data-season-flip="next"]::view-transition-old(root) {
  animation: season-flip-out-next 300ms ease-out both;
}
html[data-season-flip="next"]::view-transition-new(root) {
  animation: season-flip-in-next 300ms ease-out both;
}
html[data-season-flip="prev"]::view-transition-old(root) {
  animation: season-flip-out-prev 300ms ease-out both;
}
html[data-season-flip="prev"]::view-transition-new(root) {
  animation: season-flip-in-prev 300ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  html[data-season-flip]::view-transition-old(root),
  html[data-season-flip]::view-transition-new(root) {
    animation: none;
  }
}


/* 3. Baseline styles */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

#app {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  padding: 24px;
  transition: background 0.4s ease;
}

h1, h2, h3 {
  font-family: 'Pixelify Sans', 'Nunito', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}


/* Input / textarea placeholders render dark instead of the browser's
   default light gray, so hints read clearly against the cream paper. */
input::placeholder,
textarea::placeholder {
  color: var(--ink);
  opacity: 0.6;
}

/* Dark-mode lamp — a tiny pixel bulb fixed to the top-right. Click
   turns off the room lights (applies `is-dark-mode` to body). Hidden
   on mobile so it doesn't crowd the narrow layout. */
.dark-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 64px;
  height: 70px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
/* Pixel wall-switch — cream plate with a chunky handle that slides
   up (lights on) or down (lights off). The slide motion anchors the
   on/off state physically, the same way a real switch does. */
.dark-toggle-plate {
  display: block;
  width: 30px;
  height: 46px;
  margin: 0 auto;
  position: relative;
  background: var(--bg-page, #f7efd9);
  border: 2px solid var(--ink, #3a2432);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--ink, #3a2432);
}
.dark-toggle-switch {
  position: absolute;
  left: 50%;
  top: 5px;
  transform: translateX(-50%);
  width: 12px;
  height: 18px;
  background: var(--light-switch-color, var(--ink, #3a2432));
  border: 2px solid var(--light-switch-color, var(--ink, #3a2432));
  border-radius: 2px;
  transition: top 220ms cubic-bezier(0.5, 0, 0.5, 1.4);
}
body.is-dark-mode .dark-toggle-switch { top: 21px; }
.dark-toggle:hover .dark-toggle-plate { filter: brightness(0.97); }

/* Label under the switch — shows "lights on" in light mode, "lights
   off" in dark mode. Swapped via CSS so the JS stays untouched. */
.dark-toggle-label {
  display: block;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink, #3a2432);
  line-height: 1;
  text-align: center;
}
.dark-toggle-label-off { display: none; }
body.is-dark-mode .dark-toggle-label-on  { display: none; }
body.is-dark-mode .dark-toggle-label-off { display: inline; }
@media (max-width: 480px) {
  .dark-toggle { display: none; }
}


/* --- Dark mode (lights off) — applies app-wide when `.is-dark-mode`
   is on the body. Swaps the wall, paper, and ink colors to a
   candlelit palette so the library reads as "night in the library"
   without losing the pixel aesthetic. --- */
body.is-dark-mode,
body.is-dark-mode #app {
  background: #1a1620;
}
body.is-dark-mode {
  --bg:       #1a1620;
  --bg-page:  #2b2430;
  --ink:      #f0e6d8;
  --ink-soft: #c8bea8;
}
body.is-dark-mode .today-book,
body.is-dark-mode .open-book,
body.is-dark-mode .book-section,
body.is-dark-mode .settings-section,
body.is-dark-mode .modal-box,
body.is-dark-mode .shelf-view,
body.is-dark-mode .review-row,
body.is-dark-mode .review-log-row,
body.is-dark-mode .review-pending-row,
body.is-dark-mode .today-plans-item,
body.is-dark-mode .anchor-callout,
body.is-dark-mode .goal-row,
body.is-dark-mode .ledger-row,
body.is-dark-mode .inventory-row {
  background: #2b2430;
  color: #f0e6d8;
  border-color: #f0e6d8;
}
body.is-dark-mode input[type="text"],
body.is-dark-mode input[type="date"],
body.is-dark-mode input[type="number"],
body.is-dark-mode input[type="email"],
body.is-dark-mode textarea,
body.is-dark-mode select {
  background: #3a3340;
  color: #f0e6d8;
  border-color: #f0e6d8;
}
body.is-dark-mode .back-btn,
body.is-dark-mode .small-btn,
body.is-dark-mode .day-arrow,
body.is-dark-mode .year-arrow,
body.is-dark-mode .season-corner-arrow,
body.is-dark-mode .pill,
body.is-dark-mode .weekday-chip,
body.is-dark-mode .modal-cancel,
body.is-dark-mode .modal-add-idea,
body.is-dark-mode .ideas-jar-add {
  background: #3a3340;
  color: #f0e6d8;
  border-color: #f0e6d8;
}
body.is-dark-mode .book {
  /* Keep spine colors (user's seasonal palette) intact — they're the
     main color accent on a dark shelf, so leave them alone. Just
     adjust the label text so it stays readable on the spine. */
  color: var(--ink);
}

/* Root app padding shrinks on phones so every screen gets a few more
   millimeters of usable width. */
@media (max-width: 480px) {
  #app { padding: 10px; }
}