/* ============================================================
   style.css — Global Styles, CSS Custom Properties, Base Reset
   ============================================================

   This file defines:
   - CSS custom properties (colors, fonts, spacing, shadows)
   - Base HTML reset & typography
   - Responsive utility classes
   - Global transition helpers

   ============================================================ */

/* ---------- CSS Custom Properties (Design Tokens) ---------- */
:root {
  /* --- Color Palette (Feminine / Romantic) --- */
  --color-bg:            #FAFAFA;      /* Clean off-white background         */
  --color-bg-warm:       #FFF8F5;      /* Warm cream tint                    */
  --color-white:         #FFFFFF;      /* Pure white                         */
  --color-pink:          #FFB6C1;      /* Soft pink (primary accent)         */
  --color-pink-light:    #FFD6DD;      /* Lighter pink for backgrounds       */
  --color-pink-dark:     #E8899A;      /* Darker pink for hover states       */
  --color-rose-gold:     #B76E79;      /* Rose gold (secondary accent)       */
  --color-cream:         #F5E6D3;      /* Warm cream                         */
  --color-text:          #5A3E4B;      /* Warm dark brown-purple text        */
  --color-text-light:    #8B7078;      /* Muted text for captions            */
  --color-accent:        #D4A0A7;      /* Soft rose for borders/dividers     */
  --color-overlay:       rgba(90, 62, 75, 0.6);
  --color-shadow:        rgba(183, 110, 121, 0.15);

  /* --- Typography --- */
  --font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Poppins', 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-base:1rem;
  --font-size-lg:  1.25rem;
  --font-size-xl:  1.75rem;
  --font-size-2xl: 2.5rem;
  --font-size-3xl: 3.5rem;

  /* --- Spacing --- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* --- Shadows --- */
  --shadow-sm: 0 2px 8px var(--color-shadow);
  --shadow-md: 0 4px 20px var(--color-shadow);
  --shadow-lg: 0 8px 40px var(--color-shadow);
  --shadow-xl: 0 12px 60px rgba(183, 110, 121, 0.25);

  /* --- Borders & Radius --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-full: 50%;

  /* --- Transitions --- */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.4s ease;
  --transition-slow: 0.8s ease;

  /* --- Z-index layers --- */
  --z-screen:      1;
  --z-overlay:     100;
  --z-lightbox:    200;
  --z-particles:   150;
}

/* ---------- Base Reset ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The page gradient lives here, not on the screens: the sakura corner
     trees are painted between this layer and the screens, so an opaque
     background on #landing-screen / #main-screen would hide them. */
  background:
    linear-gradient(
      170deg,
      var(--color-bg-warm) 0%,
      var(--color-white) 35%,
      var(--color-bg-warm) 70%,
      var(--color-pink-light) 100%
    )
    fixed;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: transparent;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }

p {
  font-size: var(--font-size-base);
  line-height: 1.8;
}

a {
  color: var(--color-rose-gold);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-pink-dark); }

/* ---------- Utility Classes ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Screen transitions — screens share the viewport */
.screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  will-change: transform, opacity;
}

/* Fade-in helper — JS toggles this class */
.fade-in {
  opacity: 0;
  transition: opacity var(--transition-slow) ease;
}

.fade-in.visible {
  opacity: 1;
}

/* Fade-out helper */
.fade-out {
  opacity: 0;
  transition: opacity var(--transition-slow) ease;
}

/* ---------- Scrollbar Styling (Webkit) ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: var(--color-pink);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-rose-gold); }

/* ---------- Mobile-first responsive ---------- */
@media (min-width: 768px) {
  html { font-size: 17px; }
  h1 { font-size: calc(var(--font-size-3xl) * 1.2); }
  h2 { font-size: var(--font-size-3xl); }
}

@media (min-width: 1024px) {
  html { font-size: 18px; }
}