/*
 * ArtNest — a playful, colorful creative art studio. Cream paper canvas,
 * bright artistic accents (pink/coral/sky/mint), a rounded display face.
 */

:root {
  --canvas: #fffaf1;
  --surface: #ffffff;
  --surface-2: #fff1e0;
  --border: #f0ddc0;
  --border-strong: #e3c193;
  --ink: #2e1f3d;
  --muted: #6b5b73;

  --accent: #ff4f8b;
  --accent-hover: #e8386f;
  --accent-ink: #2c2c2c;
  --accent-text: #d6266a;
  --accent-strong: #b3155a;
  --accent-soft: #ffe3ef;
  --accent-border: #ffb4d1;

  --success: #1f9d6f;
  --success-ink: #ffffff;
  --success-soft: #dcf5e9;
  --success-strong: #157a56;

  --warning: #f0a500;
  --warning-ink: #2e1f3d;
  --warning-soft: #fff1cf;
  --warning-strong: #9b6500;

  --danger: #ef4b4b;
  --danger-ink: #ffffff;
  --danger-soft: #fde2e2;
  --danger-strong: #c22f2f;

  --chart-1: #ff4f8b;
  --chart-2: #4fb0ff;
  --chart-3: #ffc93c;
  --chart-4: #9b7bff;
  --chart-5: #2fd18f;
  --chart-6: #ff7a59;

  --font-display: "Baloo 2", "Fraunces", Georgia, serif;
  --font-body: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 800;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-card: 22px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --card-pad: 1.5rem;

  --x-coral: #ff7a59;
  --x-sunny: #ffc93c;
  --x-sky: #4fb0ff;
  --x-lavender: #9b7bff;
  --x-mint: #2fd18f;
  --x-peach: #ffb083;
  --x-turquoise: #2bc4c9;
  --x-on-photo: #ffffff;
  --gradient-hero: radial-gradient(circle at 15% 20%, rgba(255, 201, 60, 0.35), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(79, 176, 255, 0.3), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255, 79, 139, 0.25), transparent 45%);
}

html[data-theme="dark"] {
  --canvas: #241a30;
  --surface: #2e2140;
  --surface-2: #3a2a4d;
  --border: #4a3760;
  --border-strong: #5d4877;
  --ink: #fbeeff;
  --muted: #c8b8d8;

  --accent: #ff6a9d;
  --accent-hover: #ff85ae;
  --accent-ink: #241a30;
  --accent-text: #ff9dc0;
  --accent-strong: #ffc2dc;
  --accent-soft: #4a2a44;
  --accent-border: #7a3f5f;

  --success: #34c98a;
  --success-ink: #16281f;
  --success-soft: #1e3a2c;
  --success-strong: #7fe4b4;

  --warning: #ffc23c;
  --warning-ink: #2e1f0a;
  --warning-soft: #3d3115;
  --warning-strong: #ffd876;

  --danger: #ff6b6b;
  --danger-ink: #2e0f0f;
  --danger-soft: #3d2020;
  --danger-strong: #ffa3a3;

  --chart-1: #ff6a9d;
  --chart-2: #6fc0ff;
  --chart-3: #ffd876;
  --chart-4: #b39bff;
  --chart-5: #5fe3ab;
  --chart-6: #ff9b7d;
}

/* ArtNest decorative texture layer */
.paint-bg {
  position: relative;
  background-image: var(--gradient-hero);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.5;
  pointer-events: none;
}

.doodle-underline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 8 Q 30 2 60 8 T 118 6' stroke='%23ff4f8b' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
}

.auth-art {
  background: linear-gradient(160deg, var(--x-lavender), var(--accent) 55%, var(--x-sunny));
}

.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }