/*
 * Observer OS Theme Registry
 * Profile: public-family
 * Authority: Observer visual canon
 *
 * Shared by:
 * - public
 * - friends
 * - family
 * - Mommy
 * - Solomon
 *
 * Daddy's command presentation will later use darker derivatives of the
 * same command-color identities.
 */

:root {
  --observer-ink: #40395f;
  --observer-muted: #6f6984;

  --observer-authority: #d94f8a;
  --observer-security: #ba202b;
  --observer-automation: #efa51c;
  --observer-infrastructure: #ef6c22;
  --observer-coordination: #e83e66;
  --observer-network: #21aebb;
  --observer-vaults: #7248a7;
  --observer-community: #dd4c8f;
  --observer-signals: #e96c20;
  --observer-research: #63ad37;
  --observer-development: #258bd0;
  --observer-archive: #626267;
  --observer-continuity: #2886cc;

  --observer-glass: rgba(255, 255, 255, 0.90);
  --observer-line: rgba(108, 80, 162, 0.17);

  --observer-shadow:
    0 18px 46px rgba(73, 52, 111, 0.14),
    0 5px 16px rgba(73, 52, 111, 0.08);

  --observer-radius-xl: 34px;
  --observer-radius-lg: 25px;
  --observer-radius-md: 18px;

  --observer-max: 1800px;
}

/*
 * Canonical family/public wallpaper:
 * yellow → mint → blue → pink
 */
html {
  min-height: 100%;
  background: #faf9ff;
}

body.observer-family-theme {
  margin: 0;
  min-height: 100vh;
  color: var(--observer-ink);

  font-family:
    Inter,
    ui-rounded,
    "SF Pro Rounded",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;

  background:
    linear-gradient(
      90deg,
      rgba(255, 235, 132, 0.77) 0%,
      rgba(255, 244, 181, 0.73) 22%,
      rgba(181, 245, 226, 0.73) 45%,
      rgba(185, 229, 255, 0.72) 68%,
      rgba(255, 194, 226, 0.77) 100%
    ) !important;

  background-attachment: fixed !important;
}

body.observer-family-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 10% 5%,
      rgba(255, 255, 255, 0.64),
      transparent 31rem
    ),
    radial-gradient(
      circle at 92% 7%,
      rgba(255, 255, 255, 0.61),
      transparent 34rem
    ),
    radial-gradient(
      circle at 51% 65%,
      rgba(255, 255, 255, 0.25),
      transparent 43rem
    );
}

body.observer-family-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.17;

  background-image:
    radial-gradient(
      circle at 22px 22px,
      rgba(126, 92, 190, 0.20) 1.3px,
      transparent 1.7px
    );

  background-size: 44px 44px;
  mask-image:
    linear-gradient(
      to bottom,
      black,
      rgba(0, 0, 0, 0.35) 65%,
      transparent
    );
}

.observer-glass {
  border: 1px solid var(--observer-line);
  border-radius: var(--observer-radius-lg);
  background: var(--observer-glass);
  box-shadow: var(--observer-shadow);
  backdrop-filter: blur(20px) saturate(145%);
}

.observer-button {
  min-height: 47px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 18px;
  border-radius: 999px;

  text-decoration: none;
  font-weight: 900;
}

.observer-button-primary {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #795bc2,
      #ae79e1
    );

  box-shadow:
    0 11px 24px rgba(109, 74, 175, 0.24);
}

.observer-button-secondary {
  color: #5b4588;

  border:
    1px solid rgba(102, 76, 158, 0.16);

  background:
    rgba(255, 255, 255, 0.86);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}