/* ============================================================
   My Inner Season — shared foundation
   Dual-theme tokens (Sunny / Moonlit Crystal Girl), reset,
   theme system, and a few cross-direction primitives.
   Type & layout diverge per direction; brand color is shared.
   ============================================================ */

/* ---------- LIGHT · "Sunny Crystal Girl" ---------- */
:root {
  --bg:        #FBF3EA;   /* warm luminous cream */
  --bg-2:      #FFF9F3;   /* lifted cream        */
  --surface:   #FFFFFF;
  --ink:       #2A1A2B;   /* deep plum ink       */
  --ink-soft:  #6F5A68;   /* muted mauve         */
  --ink-faint: #A593A0;
  --line:      #EAD9CC;   /* hairline on cream   */
  --line-2:    #F0E2D6;

  --peach:     #FFD8C4;
  --peach-deep:#F6B79E;
  --rose:      #F2BDB4;
  --lilac:     #E4D2EC;   /* amethyst tint       */
  --lilac-deep:#C9AEDC;
  --sage:      #BFD8BC;
  --sage-deep: #9ECFA3;
  --gold:      #E0AC63;

  /* seasonal */
  --spring: #9ECFA3;
  --summer: #FFB4A2;
  --autumn: #E8A87C;
  --winter: #B8C5D6;

  --shimmer: linear-gradient(110deg, #FFCDB6 0%, #F4C6D6 32%, #DCC4EC 62%, #BFD8BC 100%);
  --halo:    radial-gradient(circle at 50% 42%, #FFE0CE 0%, rgba(255,224,206,0) 62%);

  --shadow-sm: 0 1px 2px rgba(74,42,60,.05), 0 4px 14px rgba(74,42,60,.05);
  --shadow-md: 0 8px 30px rgba(74,42,60,.09), 0 2px 8px rgba(74,42,60,.05);
  --shadow-lg: 0 24px 60px rgba(74,42,60,.13);

  --star-op: 0;           /* stars hidden in daylight */
  --orb-op: .85;
  color-scheme: light;
}

/* ---------- DARK · "Moonlit Crystal Girl" ---------- */
html[data-theme="dark"] {
  --bg:        #0B0712;   /* deep midnight plum   */
  --bg-2:      #120B1E;
  --surface:   #150F23;
  --ink:       #ECE1F2;   /* moonlight lavender   */
  --ink-soft:  #B4A3C6;
  --ink-faint: #6E607F;
  --line:      #271B38;
  --line-2:    #1D1430;

  --peach:     #5A3A48;
  --peach-deep:#7E5260;
  --rose:      #6E4A58;
  --lilac:     #2E2142;
  --lilac-deep:#5A4378;
  --sage:      #2C3A38;
  --sage-deep: #4A6360;
  --gold:      #C9A05E;

  --spring: #7A9E7E;
  --summer: #C88A7C;
  --autumn: #B8845E;
  --winter: #6A7B8C;

  --shimmer: linear-gradient(110deg, #C9B8E6 0%, #B9A0D4 34%, #8AA0C8 66%, #D9CDE8 100%);
  --halo:    radial-gradient(circle at 50% 40%, rgba(150,128,200,.28) 0%, rgba(150,128,200,0) 60%);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
  --shadow-md: 0 10px 36px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.4);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.6);

  --star-op: 1;
  --orb-op: .6;
  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .6s ease, color .6s ease;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--lilac-deep); color: var(--surface); }

/* ---------- shared primitives ---------- */
.pill { white-space: nowrap; }
.eyebrow {
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}

.wrap { width: min(100% - 2.5rem, 1180px); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* theme toggle track (shared shell, themed per page if desired) */
.theme-toggle {
  position: relative; width: 58px; height: 30px; border-radius: 999px;
  background: var(--lilac); border: 1px solid var(--line);
  display: inline-flex; align-items: center; padding: 0 4px;
  transition: background .4s ease, border-color .4s ease;
  flex: 0 0 auto;
}
.theme-toggle .knob {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm);
  display: grid; place-items: center; font-size: 12px; line-height: 1;
  transform: translateX(0); transition: transform .42s cubic-bezier(.5,1.6,.4,1);
}
html[data-theme="dark"] .theme-toggle .knob { transform: translateX(28px); }
.theme-toggle .sun, .theme-toggle .moon { position: absolute; transition: opacity .3s ease; }
html[data-theme="dark"] .theme-toggle .sun { opacity: 0; }
html:not([data-theme="dark"]) .theme-toggle .moon { opacity: 0; }

/* starfield — only visible in dark */
.starfield { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--star-op); transition: opacity .8s ease; }
.starfield .star { position: absolute; border-radius: 50%; background: #EDE6F8; animation: twinkle var(--tw,4s) ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: .15; transform: scale(.8); } 50% { opacity: .95; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .starfield .star { animation: none; opacity: .6; } }