/* Watercolor Sketchbook Engine — designer's final fix spec */

:root {
  --paper-color: #FDF8EE;
  --paper-stain: #F4EBD0;
  --ink-color: #1A1A1A;
  --ink-secondary: #4D4D4D;
  --ink-soft: rgba(26, 26, 26, 0.1);
  --card-surface: rgba(255, 255, 255, 0.35);

  --wash-red-start: #EF5350;
  --wash-red-end: #D32F2F;
  --wash-green: rgba(165, 214, 167, 0.5);
  --wash-brown: rgba(215, 204, 200, 0.6);
  --wash-blue: rgba(179, 229, 252, 0.5);
  --wash-pink: rgba(248, 187, 208, 0.5);
  --wash-red: rgba(255, 205, 210, 0.5);

  --font-family: 'Patrick Hand', cursive;
  --ink-bleed: 0.5px 0.5px 1px rgba(0,0,0,0.15);

  --sketch-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --blob-radius: 40% 60% 70% 30% / 50% 40% 60% 50%;

  --bleed-blue: rgba(173, 216, 230, 0.4);
  --bleed-terracotta: rgba(226, 114, 91, 0.3);
  --paint-dab-green-bg: #d4e1cf;
  --paint-dab-green-text: #4a5d42;
  --paint-dab-red-bg: #e66464;
  --card-gap: 24px;
  --rotation-range: 2;
}

/* FIX 1: Paper base with large soft washes */
body {
  margin: 0;
  background-color: var(--paper-color);
  font-family: var(--font-family);
  color: var(--ink-color);
  min-height: 100vh;
  position: relative;
  text-shadow: var(--ink-bleed);
  /* FIX 2: Large soft washes — 60%+ size, 0.2 opacity, bleeding into each other */
  background-image:
    radial-gradient(ellipse 60% 60% at 10% 10%, rgba(230, 213, 184, 0.2), transparent),
    radial-gradient(ellipse 60% 60% at 90% 90%, rgba(215, 204, 200, 0.2), transparent),
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(181, 227, 252, 0.15), transparent),
    radial-gradient(ellipse 60% 50% at 70% 15%, rgba(165, 214, 167, 0.15), transparent),
    radial-gradient(ellipse 50% 60% at 25% 80%, rgba(248, 187, 208, 0.15), transparent);
}

/* FIX 1 (CRITICAL): The paper grain noise overlay — non-negotiable */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.12;
  filter: contrast(120%) brightness(100%);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}