/* theme-product.css — the main IVCAP application look: an indigo primary on
   near-white surfaces, generous radii, the system font stack, and a tessellating
   "science-machine" backdrop — a seamless field of interlinked line-art
   instruments (gears, flasks, DNA, chips, atoms…) tinted in the theme's indigo.
   Tokens mirror the app's shadcn design system (primary hsl(248 79% 56%), radius
   0.75rem). Honours the OS dark-mode preference. */

:root {
  --bg: #f9fafb;
  --surface: #ffffff;
  --surface-border: hsl(0 0% 89.8%);
  --text: hsl(0 0% 12%);
  --muted: hsl(0 0% 45.1%);

  --primary: hsl(248 79% 56%);
  --primary-hover: hsl(248 79% 50%);
  --primary-contrast: hsl(0 0% 98%);
  --ring: hsl(248 79% 56% / 0.35);

  --radius: 0.75rem;
  --radius-sm: 0.5rem;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  --font-eyebrow: var(--font);

  --field-bg: #ffffff;
  --field-border: hsl(0 0% 85%);
  --divider: hsl(0 0% 89.8%);

  --danger: hsl(0 72% 45%);
  --success: hsl(160 60% 32%);

  --shadow: 0 18px 48px -24px hsl(248 60% 30% / 0.35),
    0 4px 12px -6px hsl(248 30% 20% / 0.12);

  --backdrop-1: hsl(248 79% 56% / 0.16);
  --backdrop-2: hsl(210 90% 60% / 0.12);

  /* instrument-pattern ink — kept faint so it reads as texture, never competing
     with the card. Two stops give the field a gentle indigo→violet drift. */
  --pattern-1: hsl(248 79% 46% / 0.09);
  --pattern-2: hsl(268 70% 52% / 0.075);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(0 0% 4%);
    --surface: hsl(0 0% 7%);
    --surface-border: hsl(0 0% 15%);
    --text: hsl(0 0% 98%);
    --muted: hsl(0 0% 64%);

    --primary: hsl(248 79% 66%);
    --primary-hover: hsl(248 79% 72%);
    --primary-contrast: hsl(0 0% 9%);
    --ring: hsl(248 79% 66% / 0.4);

    --field-bg: hsl(0 0% 10%);
    --field-border: hsl(0 0% 20%);
    --divider: hsl(0 0% 16%);

    --danger: hsl(0 75% 68%);
    --success: hsl(160 55% 55%);

    --shadow: 0 24px 60px -28px hsl(0 0% 0% / 0.8);

    --backdrop-1: hsl(248 79% 60% / 0.22);
    --backdrop-2: hsl(268 80% 60% / 0.16);

    --pattern-1: hsl(248 79% 72% / 0.11);
    --pattern-2: hsl(268 80% 74% / 0.09);
  }
}

/* ── Backdrop: tessellating science-instrument pattern ──────────────────────
   Replaces layout.css's drifting mesh blobs. The SVG is a single-colour tile
   used as a mask, so the purple comes from the gradient below and adapts to
   light/dark via --pattern-1/2 — one asset, both modes. */
.backdrop .blob {
  display: none;
}

.backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--pattern-1), var(--pattern-2));
  -webkit-mask: url("backdrop-product.svg") repeat 0 0 / 480px 480px;
  mask: url("backdrop-product.svg") repeat 0 0 / 480px 480px;
}