/* Theme variants — body[data-theme="..."] */

/* v1 — Paper Lab (default, original) */
body[data-theme="paper"] {
  --paper: #f4ede0;
  --paper-2: #ebe2d0;
  --paper-3: #e2d6bf;
  --ink: #1a2a3a;
  --ink-soft: #2d3e51;
  --ink-faint: #5a6b7d;
  --carmine: #a8324a;
  --sage: #6b7f5a;
  --rule: rgba(26, 42, 58, 0.18);
  --rule-strong: rgba(26, 42, 58, 0.4);

  --bg-grain:
    radial-gradient(ellipse at 20% 10%, rgba(184,138,62,.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(168,50,74,.04) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(26,42,58,.012) 2px 3px);

  /* canvas tokens */
  --node-pep: 26, 42, 58;
  --node-helix-a: 168, 50, 74;
  --node-helix-b: 107, 127, 90;
  --node-free: 107, 127, 90;
  --bond: 26, 42, 58;
  --ripple-ring: 168, 50, 74;
  --canvas-bg: transparent;
}

/* v2 — Midnight Confocal: deep indigo with bioluminescent green */
body[data-theme="midnight"] {
  --paper: #0d1424;
  --paper-2: #131c30;
  --paper-3: #1b243a;
  --ink: #e8eef5;
  --ink-soft: #b8c4d6;
  --ink-faint: #7e8ca3;
  --carmine: #5af0c4;          /* fluorescent mint */
  --sage: #f06a8a;             /* magenta accent */
  --rule: rgba(232, 238, 245, 0.14);
  --rule-strong: rgba(232, 238, 245, 0.35);

  --bg-grain:
    radial-gradient(ellipse at 18% 12%, rgba(90, 240, 196, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 88%, rgba(240, 106, 138, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(70, 100, 200, 0.05) 0%, transparent 70%);

  --node-pep: 200, 220, 240;
  --node-helix-a: 90, 240, 196;
  --node-helix-b: 240, 106, 138;
  --node-free: 130, 160, 220;
  --bond: 180, 200, 230;
  --ripple-ring: 90, 240, 196;
  --canvas-bg: transparent;
}

/* v3 — Petri Dish: warm dark oxblood/agar */
body[data-theme="petri"] {
  --paper: #2a1418;
  --paper-2: #361a20;
  --paper-3: #421f27;
  --ink: #f3e6d4;
  --ink-soft: #d8c2a8;
  --ink-faint: #9c8870;
  --carmine: #f4a04a;           /* amber */
  --sage: #c2d68a;              /* culture green */
  --rule: rgba(243, 230, 212, 0.14);
  --rule-strong: rgba(243, 230, 212, 0.32);

  --bg-grain:
    radial-gradient(circle at 30% 30%, rgba(244, 160, 74, 0.10) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(194, 214, 138, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(180, 60, 50, 0.06) 0%, transparent 60%);

  --node-pep: 243, 230, 212;
  --node-helix-a: 244, 160, 74;
  --node-helix-b: 194, 214, 138;
  --node-free: 220, 180, 130;
  --bond: 220, 180, 130;
  --ripple-ring: 244, 160, 74;
  --canvas-bg: transparent;
}

/* v4 — Carbon Schematic: graphite blueprint */
body[data-theme="carbon"] {
  --paper: #14171c;
  --paper-2: #1b1f25;
  --paper-3: #232830;
  --ink: #e6ecf2;
  --ink-soft: #aab4c0;
  --ink-faint: #6f7884;
  --carmine: #4dd0e1;           /* cyan blueprint */
  --sage: #ff5e8a;              /* magenta callout */
  --rule: rgba(230, 236, 242, 0.10);
  --rule-strong: rgba(230, 236, 242, 0.28);

  --bg-grain:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(77, 208, 225, 0.045) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(77, 208, 225, 0.045) 39px 40px),
    radial-gradient(ellipse at 50% 50%, rgba(77, 208, 225, 0.04) 0%, transparent 70%);

  --node-pep: 220, 230, 240;
  --node-helix-a: 77, 208, 225;
  --node-helix-b: 255, 94, 138;
  --node-free: 150, 170, 190;
  --bond: 200, 215, 230;
  --ripple-ring: 77, 208, 225;
  --canvas-bg: transparent;
}

/* v5 — Fluorescence: pure black, vivid stained nuclei */
body[data-theme="fluoro"] {
  --paper: #050608;
  --paper-2: #0c0e12;
  --paper-3: #14171c;
  --ink: #f1f4f8;
  --ink-soft: #c0c8d2;
  --ink-faint: #7a828d;
  --carmine: #ff3d8a;           /* magenta nuclei */
  --sage: #45ffd1;              /* cyan tubulin */
  --rule: rgba(241, 244, 248, 0.10);
  --rule-strong: rgba(241, 244, 248, 0.30);

  --bg-grain:
    radial-gradient(ellipse at 25% 30%, rgba(255, 61, 138, 0.10) 0%, transparent 35%),
    radial-gradient(ellipse at 75% 70%, rgba(69, 255, 209, 0.10) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 90%, rgba(255, 200, 60, 0.06) 0%, transparent 40%);

  --node-pep: 240, 240, 250;
  --node-helix-a: 255, 61, 138;
  --node-helix-b: 69, 255, 209;
  --node-free: 255, 220, 100;
  --bond: 200, 200, 220;
  --ripple-ring: 255, 61, 138;
  --canvas-bg: transparent;
}

/* Common dark-mode adjustments — make hero portrait placeholder readable */
body:not([data-theme="paper"]) .about-aside .portrait-placeholder {
  background:
    repeating-linear-gradient(45deg, var(--paper-3) 0 6px, transparent 6px 12px),
    var(--paper-2);
}
body:not([data-theme="paper"]) .about-aside .portrait-placeholder span {
  background: var(--paper);
  color: var(--ink-faint);
  border-color: var(--rule-strong);
}
body:not([data-theme="paper"]) .specimen { background: var(--paper-2); }
body:not([data-theme="paper"]) .skill-list span { background: var(--paper-2); }
body:not([data-theme="paper"]) .topbar {
  background: linear-gradient(to bottom, var(--paper) 60%, transparent);
}

/* Microscope fill in dark themes */
body:not([data-theme="paper"]) .specimen svg path[fill="#f4ede0"],
body:not([data-theme="paper"]) .specimen svg rect[fill="#f4ede0"] { fill: var(--paper-2); }
body:not([data-theme="paper"]) .specimen svg [stroke="#1a2a3a"] { stroke: var(--ink); }
body:not([data-theme="paper"]) .specimen svg [fill="#1a2a3a"] { fill: var(--ink); }
body:not([data-theme="paper"]) .specimen svg [fill="#a8324a"] { fill: var(--carmine); }
body:not([data-theme="paper"]) .specimen svg [stroke="#a8324a"] { stroke: var(--carmine); }
body:not([data-theme="paper"]) .specimen svg [fill="#6b7f5a"] { fill: var(--sage); }

/* base body uses tokens */
body { background: var(--paper); background-image: var(--bg-grain); color: var(--ink); }