@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap');

:root {
  --ink: #24302a;
  --muted-ink: #6d786f;
  --paper: #fbfaf6;
  --sage: #e3eee5;
  --sage-deep: #47725a;
  --peach: #f9e4d8;
  --sun: #f5bd55;
  --line: rgba(65, 86, 72, .13);
}

html { color-scheme: light; }
html.dark {
  color-scheme: dark;
  --ink: #e8eef7;
  --muted-ink: #aebdce;
  --paper: #182231;
  --sage: #26394b;
  --sage-deep: #79a9c4;
  --peach: #2d3d50;
  --sun: #e3b86d;
  --line: rgba(177, 205, 229, .16);
  --background: 215 33% 14%; --foreground: 214 42% 94%; --card: 215 29% 18%; --card-foreground: 214 42% 94%;
  --popover: 215 29% 18%; --popover-foreground: 214 42% 94%; --primary: 201 42% 62%; --primary-foreground: 215 33% 14%;
  --secondary: 213 29% 24%; --secondary-foreground: 214 42% 94%; --muted: 213 25% 22%; --muted-foreground: 211 23% 73%;
  --accent: 207 29% 27%; --accent-foreground: 214 42% 96%; --destructive: 0 63% 61%; --destructive-foreground: 0 0% 100%;
  --border: 211 25% 29%; --input: 211 25% 29%; --ring: 201 42% 62%;
}

* { -webkit-tap-highlight-color: transparent; }
body { font-family: 'DM Sans', sans-serif; background: var(--paper); color: var(--ink); }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 8% 4%, #e8f1e7 0, transparent 25rem), radial-gradient(circle at 94% 18%, #fff0db 0, transparent 22rem); }
html.dark body::before { background: radial-gradient(circle at 8% 4%, #263c52 0, transparent 27rem), radial-gradient(circle at 94% 18%, #2a344c 0, transparent 24rem); }
h1, h2, h3 { letter-spacing: -.025em; }
.font-display, .journal-title { font-family: 'Newsreader', Georgia, serif; }

.app-shell { max-width: 1180px; }
.app-header { border-color: var(--line) !important; background: rgba(251,250,246,.82) !important; }
html.dark .app-header { background: rgba(24,34,49,.86) !important; }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: var(--sage-deep); color: #fff; font-size: 1rem; box-shadow: 0 5px 16px rgba(71,114,90,.23); }
.nav-link { border-radius: 999px; padding: .45rem .8rem; color: var(--muted-ink) !important; }
.nav-link:hover { background: var(--sage); color: var(--ink) !important; }

.welcome-card { position: relative; overflow: hidden; border: 1px solid rgba(71,114,90,.12); border-radius: 24px; background: linear-gradient(120deg, #e4f0e6, #f9eedf); box-shadow: 0 14px 40px rgba(58,83,65,.08); }
html.dark .welcome-card { border-color: rgba(133,177,207,.2); background: linear-gradient(120deg, #263e52, #2c354a); box-shadow: 0 14px 40px rgba(2,10,20,.24); }
.welcome-card::after { content: '✦'; position: absolute; right: 1.75rem; top: -.8rem; font-size: 8rem; line-height: 1; color: rgba(255,255,255,.4); }
.ritual-card { background: rgba(255,255,255,.7) !important; border-color: var(--line) !important; border-radius: 18px !important; box-shadow: 0 7px 22px rgba(57,75,61,.045) !important; transition: transform .2s ease, box-shadow .2s ease; }
html.dark .ritual-card { background: rgba(36,50,67,.84) !important; box-shadow: 0 7px 22px rgba(2,10,20,.18) !important; }
.ritual-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(57,75,61,.09) !important; }
.section-kicker { color: var(--sage-deep); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

button, input, textarea, select { font-family: inherit; }
button.bg-primary, label.bg-primary { background: var(--sage-deep) !important; border-radius: 999px !important; box-shadow: 0 4px 12px rgba(71,114,90,.2); }
button.bg-primary:hover, label.bg-primary:hover { background: #355a45 !important; }
button.bg-secondary { border-radius: 999px !important; }
input, textarea, select { border-color: rgba(65,86,72,.18) !important; background: rgba(255,255,255,.68) !important; border-radius: 11px !important; }
html.dark input, html.dark textarea, html.dark select { color: var(--ink); border-color: rgba(165,194,216,.24) !important; background: rgba(22,32,46,.72) !important; }
input:focus, textarea:focus, select:focus { border-color: var(--sage-deep) !important; box-shadow: 0 0 0 3px rgba(71,114,90,.13) !important; }
textarea { line-height: 1.65; }
.mood-button { border-radius: 14px !important; transition: transform .15s ease, background .15s ease; }
.mood-button:hover { transform: translateY(-3px) scale(1.06); }
.save-toast { border-radius: 999px !important; border-color: rgba(71,114,90,.16) !important; background: #fffdf8 !important; box-shadow: 0 10px 30px rgba(57,75,61,.12) !important; }
.loading-overlay { background: rgba(35, 48, 42, .24); backdrop-filter: blur(4px); }
.loading-card { width: min(24rem, 100%); padding: 2rem; border: 1px solid rgba(255,255,255,.75); border-radius: 22px; background: #fffdf9; box-shadow: 0 24px 65px rgba(35,48,42,.22); }
.loading-spinner { width: 2.7rem; height: 2.7rem; border: 4px solid #dceadd; border-top-color: var(--sage-deep); border-radius: 999px; animation: journal-spin .75s linear infinite; }
@keyframes journal-spin { to { transform: rotate(360deg); } }

.auth-page { background: linear-gradient(145deg, #e3eee5 0%, #fbfaf6 47%, #fae6dc 100%); }
html.dark .auth-page { background: linear-gradient(145deg, #1e3244 0%, #182231 47%, #29364d 100%); }
.auth-card { border: 1px solid rgba(65,86,72,.12); border-radius: 26px; box-shadow: 0 20px 55px rgba(57,75,61,.13); }
html.dark .auth-card { background: #233246 !important; border-color: rgba(165,194,216,.2); box-shadow: 0 20px 55px rgba(2,10,20,.35); }
.auth-logo { display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 auto 1.15rem; border-radius: 16px; background: var(--sage-deep); color: #fff; font-size: 1.35rem; }
.auth-card button { background: var(--sage-deep) !important; border-radius: 999px !important; box-shadow: 0 5px 14px rgba(71,114,90,.2); }
.auth-card a { color: var(--sage-deep) !important; font-weight: 700; }
html.dark .text-slate-600, html.dark .text-gray-500, html.dark .text-gray-600, html.dark .text-gray-700 { color: var(--muted-ink) !important; }

.theme-toggle { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted-ink); transition: background .2s ease, color .2s ease; }
.theme-toggle:hover { color: var(--ink); background: var(--sage); }
.theme-toggle svg { width: 1rem; height: 1rem; }

@media (max-width: 640px) {
  .welcome-card { border-radius: 19px; }
  .welcome-card::after { right: .75rem; font-size: 5rem; }
  .app-header nav { gap: .15rem !important; }
  .nav-link { padding: .4rem .55rem; }
}