/**
 * Product-family atmospheres — applied via body[data-family] or .product-card[data-family].
 * Storefront chrome stays copper; product surfaces pick up family accent.
 */

/* —— Marine (Ship Master, Navtex) —— */
[data-family="marine"] {
  --accent: #3d9aad;
  --accent-hover: #5eb8c9;
  --accent-deep: #2a6f7c;
  --accent-ink: #061018;
  --family-glow: rgba(61, 154, 173, 0.22);
  --family-wash: linear-gradient(
    145deg,
    #071018 0%,
    #0c1c28 42%,
    #0a141c 100%
  );
  --family-mesh: radial-gradient(
      ellipse 80% 55% at 85% 10%,
      rgba(61, 154, 173, 0.18),
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 40% at 10% 80%,
      rgba(30, 80, 100, 0.25),
      transparent 50%
    );
}

/* —— Systems (Disk Manager, CoreSentinel, Ironnest) —— */
[data-family="systems"] {
  --accent: #6b8cae;
  --accent-hover: #8aa6c4;
  --accent-deep: #4a6680;
  --accent-ink: #0a0e14;
  --family-glow: rgba(107, 140, 174, 0.2);
  --family-wash: linear-gradient(
    145deg,
    #0a0c10 0%,
    #12161e 45%,
    #0c0e12 100%
  );
  --family-mesh: radial-gradient(
      ellipse 70% 50% at 90% 0%,
      rgba(107, 140, 174, 0.16),
      transparent 50%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(80, 100, 120, 0.06) 100%
    );
}

/* —— Mesh / Bond (molycli, bond-network) —— */
[data-family="mesh"] {
  --accent: #5a9e7e;
  --accent-hover: #78b898;
  --accent-deep: #3d7358;
  --accent-ink: #06110c;
  --family-glow: rgba(90, 158, 126, 0.2);
  --family-wash: linear-gradient(
    145deg,
    #080c0a 0%,
    #0e1612 48%,
    #0a100c 100%
  );
  --family-mesh: radial-gradient(
      ellipse 65% 45% at 80% 15%,
      rgba(90, 158, 126, 0.18),
      transparent 55%
    ),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 28px,
      rgba(90, 158, 126, 0.03) 28px,
      rgba(90, 158, 126, 0.03) 29px
    );
}

/* —— Media / Creative (voxal, Diffuse, Josha) —— */
[data-family="media"] {
  --accent: #c4895a;
  --accent-hover: #d4a078;
  --accent-deep: #9a6640;
  --accent-ink: #120c08;
  --family-glow: rgba(196, 137, 90, 0.22);
  --family-wash: linear-gradient(
    145deg,
    #100c0a 0%,
    #1a1410 48%,
    #0e0c0a 100%
  );
  --family-mesh: radial-gradient(
      ellipse 75% 55% at 70% 0%,
      rgba(196, 137, 90, 0.2),
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 40% at 0% 100%,
      rgba(120, 60, 80, 0.12),
      transparent 45%
    );
}

body[data-family] .product-hero,
body[data-family] .hero-store {
  background: var(--family-mesh), var(--family-wash);
}

body[data-family] .brand-name,
body[data-family] .section-eyebrow,
body[data-family] a:not(.btn):hover {
  color: var(--accent);
}

body[data-family] .btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

body[data-family] .btn-primary:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}

body[data-family] .badge.accent {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

body[data-family] input:focus,
body[data-family] select:focus,
body[data-family] textarea:focus {
  outline-color: var(--accent);
}

.product-card[data-family="marine"] {
  --card-accent: #3d9aad;
}
.product-card[data-family="systems"] {
  --card-accent: #6b8cae;
}
.product-card[data-family="mesh"] {
  --card-accent: #5a9e7e;
}
.product-card[data-family="media"] {
  --card-accent: #c4895a;
}

.product-card[data-family]::before {
  background: var(--card-accent, var(--accent));
  box-shadow: 0 0 24px color-mix(in srgb, var(--card-accent, var(--accent)) 40%, transparent);
}