/* ==========================================================================
   Parass Apps — shared design tokens
   --------------------------------------------------------------------------
   Canonical copy lives in apps-landing/site/theme.css. Each app keeps a
   verbatim copy (cottage-keeper/public/theme.css, recipe-book/public/theme.css)
   so nothing depends on another site being reachable. When you change a token
   here, copy the file to the other repos.

   Default theme is the dark "aurora" look from apps.parass.com. Apps that
   offer a theme toggle can set <html data-theme="light"> or "auto".
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Canvas */
  --bg: #0a0c14;
  --bg-2: #0e1120;

  /* Text */
  --text: #eef0f8;
  --text-dim: #9aa1b8;
  --text-faint: #5d6478;

  /* Frosted glass surfaces + hairline strokes */
  --glass: rgba(255, 255, 255, 0.045);
  --glass-hover: rgba(255, 255, 255, 0.085);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-hover: rgba(255, 255, 255, 0.20);

  /* Brand */
  --accent: #7c6cff;          /* violet */
  --accent-2: #38bdf8;        /* sky */
  --accent-soft: rgba(124, 108, 255, 0.16);
  --accent-text: #ffffff;
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --grad-text: linear-gradient(90deg, #b8aeff, #7cc9ff 60%, #6ee7b7);

  /* Semantic */
  --good: #34d399;
  --good-bg: rgba(52, 211, 153, 0.10);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, 0.10);
  --danger: #fb7185;
  --danger-bg: rgba(251, 113, 133, 0.10);
  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, 0.10);

  /* Landing badges */
  --tag-cottage: #34d399;
  --tag-home: #38bdf8;
  --tag-external: #fbbf24;

  /* Shape + depth */
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 6px 24px rgba(124, 108, 255, 0.35);

  /* Type: system stack, same as the landing page */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--font);
}

/* Light variant for apps with a theme toggle. Same hues on a pale canvas. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5fb;
  --bg-2: #ffffff;
  --text: #12141f;
  --text-dim: #5b6178;
  --text-faint: #8a90a6;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-hover: rgba(255, 255, 255, 0.92);
  --glass-strong: rgba(255, 255, 255, 1);
  --stroke: rgba(18, 20, 31, 0.10);
  --stroke-hover: rgba(18, 20, 31, 0.22);
  --accent: #6a5cf5;
  --accent-2: #0ea5e9;
  --accent-soft: rgba(106, 92, 245, 0.12);
  --good: #059669;
  --good-bg: rgba(5, 150, 105, 0.10);
  --warn: #b45309;
  --warn-bg: rgba(180, 83, 9, 0.10);
  --danger: #e11d48;
  --danger-bg: rgba(225, 29, 72, 0.08);
  --info: #0284c7;
  --info-bg: rgba(2, 132, 199, 0.10);
  --shadow: 0 8px 30px rgba(20, 24, 50, 0.10);
  --shadow-glow: 0 6px 20px rgba(106, 92, 245, 0.25);
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    color-scheme: light;
    --bg: #f4f5fb; --bg-2: #ffffff;
    --text: #12141f; --text-dim: #5b6178; --text-faint: #8a90a6;
    --glass: rgba(255, 255, 255, 0.72); --glass-hover: rgba(255, 255, 255, 0.92); --glass-strong: rgba(255, 255, 255, 1);
    --stroke: rgba(18, 20, 31, 0.10); --stroke-hover: rgba(18, 20, 31, 0.22);
    --accent: #6a5cf5; --accent-2: #0ea5e9; --accent-soft: rgba(106, 92, 245, 0.12);
    --good: #059669; --good-bg: rgba(5, 150, 105, 0.10);
    --warn: #b45309; --warn-bg: rgba(180, 83, 9, 0.10);
    --danger: #e11d48; --danger-bg: rgba(225, 29, 72, 0.08);
    --info: #0284c7; --info-bg: rgba(2, 132, 199, 0.10);
    --shadow: 0 8px 30px rgba(20, 24, 50, 0.10); --shadow-glow: 0 6px 20px rgba(106, 92, 245, 0.25);
  }
}

/* --------------------------------------------------------------------------
   Aurora background. Drop <div class="aurora"><div class="blob"></div></div>
   as the first child of <body>. It sits behind everything (z-index -1).
   -------------------------------------------------------------------------- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  overflow: hidden;
  pointer-events: none;
}
.aurora::before, .aurora::after, .aurora .blob {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.55;
}
.aurora::before {
  width: 60vw; height: 60vw;
  top: -25vw; left: -15vw;
  background: radial-gradient(circle, rgba(124, 108, 255, 0.35), transparent 65%);
  animation: aurora-drift1 26s ease-in-out infinite alternate;
}
.aurora::after {
  width: 55vw; height: 55vw;
  bottom: -25vw; right: -15vw;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.28), transparent 65%);
  animation: aurora-drift2 32s ease-in-out infinite alternate;
}
.aurora .blob {
  width: 40vw; height: 40vw;
  top: 30vh; left: 55vw;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.15), transparent 65%);
  animation: aurora-drift3 38s ease-in-out infinite alternate;
}
html[data-theme="light"] .aurora::before,
html[data-theme="light"] .aurora::after,
html[data-theme="light"] .aurora .blob { opacity: 0.35; }
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .aurora::before,
  html[data-theme="auto"] .aurora::after,
  html[data-theme="auto"] .aurora .blob { opacity: 0.35; }
}
@keyframes aurora-drift1 { to { transform: translate(8vw, 6vh) scale(1.1); } }
@keyframes aurora-drift2 { to { transform: translate(-6vw, -8vh) scale(1.15); } }
@keyframes aurora-drift3 { to { transform: translate(-10vw, 5vh); } }

@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after, .aurora .blob { animation: none; }
}