/* ============================================================
   main.css — Design tokens, reset, and shared utilities
   The Quiet Post
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

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

:root, :root.theme-light, :root.theme-dark {
  /* True Black & White */
  --c-bg-deep:    #fefcfb; /* Warm pristine white */
  --c-bg:         #ffffff;
  --c-bg-raised:  #ffffff;
  --c-bg-hover:   #f5f5f5;
  --c-border:     #111111; /* Sharp black borders */
  --c-border-sub: #e0e0e0;

  --c-gold:       #8a5a58; /* Sakura bark accents */
  --c-gold-lit:   #a87c7a;
  --c-gold-dim:   #5c3a38;
  
  --c-rose:       #8a5a58;
  --c-rose-lit:   #a87c7a;

  --c-text:       #1a1a1a; /* Charcoal text */
  --c-text-dim:   #4a4a4a;
  --c-text-faint: #8a8a8a;

  --c-ink-dim:    #8a5a58;
  --c-paper:      #fdfaf3;
  --c-ink:        #1a1a1a;
  
  --c-auth-glow:  rgba(0, 0, 0, 0); /* No glow */
  --c-auth-card-bg: #ffffff;
}

  /* Typography */
  --font-serif: 'Lora', 'Cormorant Garamond', Georgia, serif;
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --sidebar-w: 268px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
  --shadow-md:   0 2px 8px rgba(0,0,0,.4),  0 8px 32px rgba(0,0,0,.3);
  --shadow-lg:   0 4px 16px rgba(0,0,0,.5), 0 16px 56px rgba(0,0,0,.4);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 150ms;
  --t:      220ms;
  --t-slow: 380ms;
}

html, body {
  height: 100%;
  background: var(--c-bg-deep);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* ── Falling Petals Background ───────────────────────────────── */
.blossom-container {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  perspective: 1000px;
}

.petal {
  position: absolute;
  top: -10%;
  width: 16px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 60'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='80%25' r='80%25'%3E%3Cstop offset='0%25' stop-color='%23ff69b4'/%3E%3Cstop offset='100%25' stop-color='%23ffd1dc'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M25,12 C20,5 5,0 0,25 C-5,50 15,60 25,60 C35,60 55,50 50,25 C45,0 30,5 25,12 Z' fill='url(%23g)'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
  animation: fall linear infinite, drift ease-in-out infinite alternate, spin linear infinite;
  transform-style: preserve-3d;
  filter: drop-shadow(0 2px 4px rgba(255, 105, 180, 0.3));
}

/* High Frequency Petals */
.petal.p1 { left: 5%; animation-duration: 12s, 4s, 6s; animation-delay: 0s, 0s, 0s; }
.petal.p2 { left: 15%; animation-duration: 18s, 5s, 8s; animation-delay: -5s, -2s, -1s; transform: scale(0.8); }
.petal.p3 { left: 25%; animation-duration: 15s, 6s, 5s; animation-delay: -2s, -1s, -3s; transform: scale(1.2); }
.petal.p4 { left: 35%; animation-duration: 22s, 4.5s, 7s; animation-delay: -8s, -3s, -2s; }
.petal.p5 { left: 45%; animation-duration: 14s, 5.5s, 6.5s; animation-delay: -4s, -0.5s, -4s; transform: scale(0.9); }
.petal.p6 { left: 55%; animation-duration: 19s, 3.5s, 5.5s; animation-delay: -10s, -1s, -2s; transform: scale(1.1); }
.petal.p7 { left: 65%; animation-duration: 16s, 4.2s, 7s; animation-delay: -6s, -1.5s, -2s; transform: scale(0.85); }
.petal.p8 { left: 75%; animation-duration: 20s, 5.2s, 6.2s; animation-delay: -12s, -3s, -1s; transform: scale(1.15); }
.petal.p9 { left: 85%; animation-duration: 13s, 4.8s, 5.8s; animation-delay: -3s, -2.5s, -4s; transform: scale(0.95); }
.petal.p10 { left: 95%; animation-duration: 17s, 5.8s, 6.8s; animation-delay: -9s, -0.5s, -3s; transform: scale(1.05); }

.petal.p11 { left: 8%; animation-duration: 14s, 3.8s, 5.2s; animation-delay: -1s, -1.2s, -2s; transform: scale(0.75); }
.petal.p12 { left: 18%; animation-duration: 21s, 4.6s, 7.1s; animation-delay: -7s, -2.1s, -3.5s; transform: scale(1.3); }
.petal.p13 { left: 28%; animation-duration: 16s, 5.1s, 6.4s; animation-delay: -11s, -3.2s, -1.8s; }
.petal.p14 { left: 38%; animation-duration: 19s, 4.3s, 5.9s; animation-delay: -4s, -0.8s, -4.2s; transform: scale(0.9); }
.petal.p15 { left: 48%; animation-duration: 23s, 5.7s, 7.5s; animation-delay: -13s, -2.8s, -1.1s; transform: scale(1.1); }
.petal.p16 { left: 58%; animation-duration: 15s, 3.9s, 6.1s; animation-delay: -2s, -1.4s, -2.7s; transform: scale(0.8); }
.petal.p17 { left: 68%; animation-duration: 18s, 4.9s, 6.9s; animation-delay: -8s, -2.5s, -3.1s; transform: scale(1.25); }
.petal.p18 { left: 78%; animation-duration: 13.5s, 5.3s, 5.6s; animation-delay: -5s, -0.6s, -1.5s; }
.petal.p19 { left: 88%; animation-duration: 20.5s, 4.1s, 7.3s; animation-delay: -10s, -3.4s, -2.9s; transform: scale(0.95); }
.petal.p20 { left: 98%; animation-duration: 17.5s, 5.6s, 6.3s; animation-delay: -3s, -1.8s, -4.6s; transform: scale(1.05); }

.petal.p21 { left: 12%; animation-duration: 16.5s, 4.4s, 5.4s; animation-delay: -6s, -2.2s, -0.8s; }
.petal.p22 { left: 32%; animation-duration: 14.5s, 5.8s, 6.6s; animation-delay: -9s, -1.1s, -3.3s; transform: scale(0.85); }
.petal.p23 { left: 52%; animation-duration: 21.5s, 4.7s, 7.8s; animation-delay: -14s, -3.6s, -2.1s; transform: scale(1.18); }
.petal.p24 { left: 72%; animation-duration: 19.5s, 3.6s, 5.1s; animation-delay: -2.5s, -0.4s, -1.3s; transform: scale(0.92); }
.petal.p25 { left: 92%; animation-duration: 15.5s, 5.4s, 6.7s; animation-delay: -7.5s, -2.9s, -4.1s; transform: scale(1.12); }

@keyframes fall {
  0% { top: -10%; }
  100% { top: 110%; }
}

@keyframes drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(80px); }
}

@keyframes spin {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border-sub); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-gold-dim); }

/* Utility */
.hidden { display: none !important; }

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}