/* Warm daylight, softly overlapping colour, and a fine paper surface.
   All layers are static and local: no animation or external image request. */
:root {
  --paper: #fbf4e9;
  --white: #fffdf8;
  --line: #e6ddce;
  --muted: #666c5f;
  --shadow: 0 8px 28px #8b705b0b, 0 1px 3px #8b705b05;
}

html { background: var(--paper); }
body { background: transparent; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url('/static/paper-grain.svg'),
    radial-gradient(ellipse at 85% 4%, #f3d7c6a8 0%, #f3d7c600 51%),
    radial-gradient(ellipse at 3% 58%, #e5e8cfa6 0%, #e5e8cf00 52%),
    radial-gradient(ellipse at 75% 95%, #eddbd46b 0%, #eddbd400 53%),
    linear-gradient(135deg, #fbf5e9 0%, #faf6ee 48%, #f5efe2 100%);
  background-size: 180px 180px, auto, auto, auto, auto;
}

.sidebar {
  background:
    radial-gradient(ellipse at 0 0, #f6e4d5ad, transparent 58%),
    linear-gradient(165deg, #f7f1e5f5, #ecedddf5 75%, #f4ecdef5);
  border-color: #dfd8c7;
  box-shadow: 5px 0 30px #88786004;
}
.nav a.active {
  background: linear-gradient(115deg, #d9e4d2, #e8ebdb);
  box-shadow: inset 3px 0 #6f8963, inset 0 1px #ffffffb3;
}
.quote {
  background: linear-gradient(145deg, #fff9ecbd, #f2edddc2);
  border-color: #dcd8c5;
  box-shadow: inset 0 1px #ffffffb3;
}
.topbar { border-bottom-color: #dcd4c375; }

.hero {
  background:
    url('/static/paper-grain.svg') repeat,
    radial-gradient(ellipse at 5% 0%, #fff8e1ed 0%, transparent 57%),
    radial-gradient(ellipse at 96% 12%, #efd0b9c4 0%, transparent 62%),
    radial-gradient(ellipse at 80% 103%, #cddac4c9 0%, transparent 66%),
    linear-gradient(125deg, #f5edda 0%, #f5eadb 48%, #e7e6d5 100%);
  background-size: 180px 180px, auto, auto, auto, auto;
  border: 1px solid #ffffffc9;
  box-shadow: inset 0 1px 0 #ffffffde, 0 12px 40px #927a5710;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid #fffcf094;
  border-radius: 50%;
  width: 390px;
  height: 390px;
  right: -110px;
  top: -180px;
}
.hero::after {
  width: 480px;
  height: 480px;
  right: -155px;
  top: -225px;
  border-color: #fffdf070;
}
.hero-art { position: relative; z-index: 1; }
.hero p { color: #56614f; }

.baby-card {
  border-color: #ffffffc7;
  background:
    radial-gradient(ellipse at 100% 0, #f5dfc9a6, transparent 75%),
    linear-gradient(135deg, #fffdf8f5, #fbf0e5e0);
  box-shadow: var(--shadow), inset 0 1px #ffffff;
}
.baby-card:nth-child(2) {
  background:
    radial-gradient(ellipse at 100% 0, #e0e8d0b8, transparent 75%),
    linear-gradient(135deg, #fffdf8f5, #f0f2e6e0);
}
.baby-card .avatar {
  background: linear-gradient(140deg, #f8e9d7, #e9c8aa);
  box-shadow: inset 0 1px 2px #ffffffd9;
}
.baby-card:nth-child(2) .avatar {
  background: linear-gradient(140deg, #ecf0df, #cddcbd);
}
.little-stat {
  background: linear-gradient(135deg, #fffdf65e, #f6ecdd6b);
  border: 1px dashed #cfc9b3;
  box-shadow: none;
}
.memory-card, .photo-tile, .panel, .auth-card {
  background: linear-gradient(145deg, #fffefbed 0%, #fffaf3f5 100%);
  border-color: #fffefbd9;
  box-shadow: var(--shadow), inset 0 1px 0 #ffffff;
}
.empty {
  background:
    radial-gradient(ellipse at 50% 0, #fff8e9c7, transparent 75%),
    linear-gradient(150deg, #fffdf8bd, #faf3e8b3);
  border-color: #d8ceb9;
}
.prompt-card, .milestone-intro {
  background:
    radial-gradient(ellipse at 0 0, #fff7dc, transparent 75%),
    linear-gradient(145deg, #f7edd9, #f0e0cf);
  border-color: #e7d7bd;
  box-shadow: inset 0 1px #fffdf3;
}
.prompt-card p { color: #6d6657; }
.demo-banner { background: linear-gradient(105deg, #fbefd8, #f4e4cf); }
.primary {
  background: linear-gradient(135deg, #527664, #3e6050);
  box-shadow: inset 0 1px #ffffff29, 0 4px 12px #3e605015;
}
.chip:not(.active), .secondary, .search input {
  background: linear-gradient(130deg, #fffef9f5, #faf6eced);
}
dialog { background: linear-gradient(145deg, #fffef9, #fbf4e8); }
dialog::backdrop { background: #4c493a61; }
.footer-note { color: #666d5e; }

@media (min-width: 701px) and (max-width: 980px) {
  .sidebar .brand small { font-size: 7px; letter-spacing: .4px; }
}

@media (max-width: 700px) {
  body::before {
    background-image:
      url('/static/paper-grain.svg'),
      radial-gradient(ellipse at 100% 12%, #f3d4c0a3, transparent 59%),
      radial-gradient(ellipse at 0% 84%, #dfe6cc99, transparent 60%),
      linear-gradient(155deg, #fcf5e9, #faf1e5 52%, #f2f0df);
    background-size: 180px 180px, auto, auto, auto;
  }
  .hero-art { position: absolute; }
  .hero::before { width: 270px; height: 270px; right: -145px; top: -100px; }
  .hero::after { width: 340px; height: 340px; right: -180px; top: -135px; }
  .topbar {
    background: linear-gradient(110deg, #fcf5e9f2, #f7eadcf2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .sidebar {
    background: linear-gradient(110deg, #fffaf0f5, #f2f1e4f5);
    border-top-color: #fffdf4;
    box-shadow: 0 -6px 24px #8072530a;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .nav a.active { box-shadow: inset 0 1px #ffffffc9; }
}