/* OutfitAvatar · themes.css — the ten theme personalities.
   Each block only overrides tokens (+ a few personality touches), so adding a
   theme = one block here + one registry entry in js/themes.js.               */

/* ================= Default White ================= */
/* Baseline tokens live in base.css — this block exists for [data-theme] scoping
   (theme gallery mocks) and any future tweaks. */
[data-theme="default-white"] { color-scheme: light; }

/* ================= Midnight ================= */
[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #101318;
  --bg-2: #171c26;
  --surface: #181d26;
  --surface-2: #212836;
  --border: rgba(235, 240, 255, 0.09);
  --text: #edf0f8;
  --text-2: #aab2c5;
  --text-3: #6b7488;
  --accent: #5a8cff;
  --accent-2: #8a6bff;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.32);
  --shadow-2: 0 8px 22px rgba(0, 0, 0, 0.45), 0 22px 54px rgba(0, 0, 0, 0.5);
  --chart-1: #4a7bf0; --chart-2: #199e70; --chart-3: #c98500; --chart-4: #2e8b2e;
  --chart-5: #8f7ae8; --chart-6: #e05f5f; --chart-7: #d55181; --chart-8: #d95926;
  --chart-dim: #3d4658;
  --grid-line: rgba(235, 240, 255, 0.07);
}
[data-theme="midnight"] body { background-image: radial-gradient(1100px 600px at 78% -12%, #1b2334, transparent); }

/* ================= Synthwave ================= */
[data-theme="synthwave"] {
  color-scheme: dark;
  --bg: #16102a;
  --bg-2: #221548;
  --surface: #211741;
  --surface-2: #2c1f55;
  --border: rgba(242, 130, 237, 0.16);
  --text: #f2ecff;
  --text-2: #c3b3e8;
  --text-3: #8a78b8;
  --accent: #22d3ee;
  --accent-2: #f471b5;
  --on-accent: #14041f;
  --shadow-1: 0 2px 8px rgba(24, 8, 46, 0.5), 0 0 18px rgba(122, 60, 220, 0.14);
  --shadow-2: 0 10px 30px rgba(16, 4, 36, 0.65), 0 0 34px rgba(226, 90, 190, 0.22);
  --h-track: 0.02em;
  --chart-1: #2fc4dd; --chart-2: #f471b5; --chart-3: #c9a227; --chart-4: #3fae5f;
  --chart-5: #9d8bf0; --chart-6: #ef6262; --chart-7: #e07ab0; --chart-8: #e8823f;
  --chart-dim: #4a3a78;
  --grid-line: rgba(242, 130, 237, 0.12);
}
[data-theme="synthwave"] body { background-image: linear-gradient(180deg, #16102a 0%, #241452 74%, #38175e 100%); }
[data-theme="synthwave"] h1, [data-theme="synthwave"] h2 {
  background: linear-gradient(92deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="synthwave"] .btn-primary { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 30px color-mix(in srgb, var(--accent-2) 25%, transparent); }
[data-theme="synthwave"] .card { box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(122, 220, 240, 0.05); }
[data-theme="synthwave"] .nav-link.on { text-shadow: 0 0 12px var(--accent); }
.fx-horizon::before {
  content: ""; position: absolute; inset: auto 0 0;
  height: 34vh;
  background:
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(154, 90, 240, 0.16) 34px 35px),
    linear-gradient(180deg, transparent, rgba(90, 30, 150, 0.24));
  mask-image: linear-gradient(180deg, transparent, #000 45%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
}

/* ================= Forest ================= */
[data-theme="forest"] {
  color-scheme: light;
  --bg: #eef0e3;
  --bg-2: #e2e8d2;
  --surface: #f9faf1;
  --surface-2: #ecefdd;
  --border: rgba(52, 66, 38, 0.13);
  --text: #26301f;
  --text-2: #55624a;
  --text-3: #8a967c;
  --accent: #4a7c46;
  --accent-2: #8a6d3b;
  --shadow-1: 0 1px 2px rgba(52, 66, 38, 0.06), 0 5px 16px rgba(52, 66, 38, 0.08);
  --shadow-2: 0 8px 20px rgba(52, 66, 38, 0.13), 0 20px 46px rgba(52, 66, 38, 0.15);
  --radius-scale: 1.25;
  --font-body: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand, -apple-system, sans-serif;
  --font-display: var(--font-body);
  --chart-1: #4a7c46; --chart-2: #8a6d3b; --chart-3: #b08a2e; --chart-4: #2e6b52;
  --chart-5: #7a5fa0; --chart-6: #b8503f; --chart-7: #b06a8a; --chart-8: #c06a35;
  --chart-dim: #c4ccb2;
  --grid-line: rgba(52, 66, 38, 0.09);
}
[data-theme="forest"] body { background-image: radial-gradient(1000px 620px at 85% -8%, #dfe8c8, transparent), radial-gradient(800px 500px at -10% 110%, #e4ead2, transparent); }
.fx-blobs::before, .fx-blobs::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.4;
}
.fx-blobs::before { width: 44vw; height: 44vw; background: #b9cf9a; top: -14vw; right: -12vw; }
.fx-blobs::after { width: 34vw; height: 34vw; background: #d6c99a; bottom: -12vw; left: -10vw; }

/* ================= Ocean ================= */
[data-theme="ocean"] {
  color-scheme: light;
  --bg: #e8f2f6;
  --bg-2: #d8eaf2;
  --surface: #fbfeff;
  --surface-2: #eaf4f8;
  --border: rgba(18, 60, 84, 0.12);
  --text: #12303e;
  --text-2: #3f6274;
  --text-3: #7c9aaa;
  --accent: #0e7fa8;
  --accent-2: #14b8a6;
  --shadow-1: 0 1px 2px rgba(18, 60, 84, 0.05), 0 5px 16px rgba(18, 60, 84, 0.08);
  --shadow-2: 0 8px 22px rgba(18, 60, 84, 0.13), 0 22px 48px rgba(18, 60, 84, 0.15);
  --chart-1: #0e7fa8; --chart-2: #12a48a; --chart-3: #c9930f; --chart-4: #2e8b2e;
  --chart-5: #6b5fc0; --chart-6: #d05252; --chart-7: #c66292; --chart-8: #d0742f;
  --chart-dim: #b8d2dd;
  --grid-line: rgba(18, 60, 84, 0.08);
}
[data-theme="ocean"] body { background-image: linear-gradient(180deg, #eaf5f9, #d6ebf3 60%, #c8e4ef); }
.fx-waves::before {
  content: ""; position: absolute; inset: auto 0 0; height: 26vh; opacity: 0.5;
  background:
    radial-gradient(58% 100% at 25% 100%, rgba(66, 160, 200, 0.25), transparent 70%),
    radial-gradient(58% 100% at 75% 100%, rgba(20, 184, 166, 0.2), transparent 70%);
}

/* ================= Sunset ================= */
[data-theme="sunset"] {
  color-scheme: light;
  --bg: #fdf0e4;
  --bg-2: #fbe2cd;
  --surface: #fffaf4;
  --surface-2: #faeddd;
  --border: rgba(96, 44, 24, 0.13);
  --text: #3a2418;
  --text-2: #7a5340;
  --text-3: #b08d78;
  --accent: #e8703a;
  --accent-2: #e0447a;
  --shadow-1: 0 1px 2px rgba(120, 60, 20, 0.06), 0 5px 16px rgba(120, 60, 20, 0.09);
  --shadow-2: 0 8px 22px rgba(120, 60, 20, 0.15), 0 22px 48px rgba(120, 60, 20, 0.17);
  --chart-1: #d85f2a; --chart-2: #199e70; --chart-3: #c98500; --chart-4: #4a8a2e;
  --chart-5: #9d5fc0; --chart-6: #d04545; --chart-7: #d05181; --chart-8: #b8622a;
  --chart-dim: #e8cbb2;
  --grid-line: rgba(96, 44, 24, 0.09);
}
[data-theme="sunset"] body { background-image: linear-gradient(180deg, #fdf3e6, #fbdfc4 62%, #f8cdb4); }
.fx-glow::before {
  content: ""; position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 130, 0.5), rgba(240, 120, 120, 0.14) 55%, transparent 72%);
  filter: blur(10px);
}

/* ================= Sakura ================= */
[data-theme="sakura"] {
  color-scheme: light;
  --bg: #fbf3f5;
  --bg-2: #f8e6ec;
  --surface: #ffffff;
  --surface-2: #f9edf1;
  --border: rgba(140, 62, 92, 0.12);
  --text: #3c2a33;
  --text-2: #7c5e6b;
  --text-3: #b295a2;
  --accent: #d9668f;
  --accent-2: #b48ad6;
  --shadow-1: 0 1px 2px rgba(150, 80, 110, 0.05), 0 5px 16px rgba(150, 80, 110, 0.08);
  --shadow-2: 0 8px 22px rgba(150, 80, 110, 0.13), 0 22px 48px rgba(150, 80, 110, 0.15);
  --radius-scale: 1.15;
  --font-display: "New York", ui-serif, Georgia, serif;
  --h-weight: 650;
  --chart-1: #c85585; --chart-2: #199e70; --chart-3: #c98500; --chart-4: #4a8a2e;
  --chart-5: #9d7ad6; --chart-6: #d04545; --chart-7: #d0628f; --chart-8: #d0742f;
  --chart-dim: #ecd2dc;
  --grid-line: rgba(140, 62, 92, 0.08);
}
[data-theme="sakura"] body { background-image: radial-gradient(900px 560px at 88% -6%, #fce4ee, transparent), radial-gradient(700px 480px at -8% 108%, #f6e0f0, transparent); }
.fx-petal {
  position: absolute; top: -4vh;
  width: 12px; height: 9px;
  background: radial-gradient(circle at 30% 30%, #f6b6cd, #ee8fb4);
  border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
  opacity: 0.75;
  animation: petalFall linear infinite;
}
@keyframes petalFall {
  0% { transform: translate(0, -4vh) rotate(0deg); }
  25% { transform: translate(3vw, 26vh) rotate(160deg); }
  50% { transform: translate(-2vw, 52vh) rotate(300deg); }
  75% { transform: translate(2.5vw, 78vh) rotate(440deg); }
  100% { transform: translate(-1vw, 108vh) rotate(600deg); }
}

/* ================= Cyberpunk ================= */
[data-theme="cyberpunk"] {
  color-scheme: dark;
  --bg: #0a0a0c;
  --bg-2: #101014;
  --surface: #131318;
  --surface-2: #1c1c23;
  --border: rgba(239, 227, 42, 0.2);
  --text: #f2f2e8;
  --text-2: #b8b8a4;
  --text-3: #74746a;
  --accent: #efe32a;
  --accent-2: #2ae0e8;
  --on-accent: #101010;
  --shadow-1: 0 0 0 1px rgba(239, 227, 42, 0.06), 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 0 22px rgba(239, 227, 42, 0.14), 0 14px 40px rgba(0, 0, 0, 0.65);
  --radius-scale: 0.22;
  --font-display: ui-monospace, "SF Mono", Menlo, monospace;
  --h-case: uppercase;
  --h-track: 0.07em;
  --h-weight: 750;
  --chart-1: #d8cd2a; --chart-2: #2ac4cc; --chart-3: #e0862a; --chart-4: #3fae3f;
  --chart-5: #9d8bf0; --chart-6: #ef5252; --chart-7: #d55181; --chart-8: #d97a26;
  --chart-dim: #3a3a2e;
  --grid-line: rgba(239, 227, 42, 0.1);
}
[data-theme="cyberpunk"] body { background-image: linear-gradient(180deg, #0a0a0c, #101016); }
[data-theme="cyberpunk"] .btn-primary { box-shadow: 0 0 14px rgba(239, 227, 42, 0.4); }
[data-theme="cyberpunk"] .nav-link.on, [data-theme="cyberpunk"] .tab.on { text-shadow: 0 0 10px var(--accent); }
[data-theme="cyberpunk"] .card { border-left-width: 2px; }
.fx-scanlines::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px);
}
.fx-scanlines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22vh;
  background: linear-gradient(180deg, transparent, rgba(42, 224, 232, 0.045), transparent);
  animation: scanSweep 7s linear infinite;
}
@keyframes scanSweep { 0% { top: -25vh; } 100% { top: 105vh; } }
html.no-anim .fx-scanlines::after { display: none; }

/* ================= Space ================= */
[data-theme="space"] {
  color-scheme: dark;
  --bg: #0a0e20;
  --bg-2: #121837;
  --surface: #141a38;
  --surface-2: #1d244c;
  --border: rgba(160, 175, 255, 0.13);
  --text: #e8ecff;
  --text-2: #a8b2dd;
  --text-3: #6a74a4;
  --accent: #7a8cff;
  --accent-2: #b06be8;
  --shadow-1: 0 2px 8px rgba(3, 6, 20, 0.5);
  --shadow-2: 0 10px 30px rgba(3, 6, 20, 0.7), 0 0 30px rgba(122, 140, 255, 0.1);
  --h-track: 0.015em;
  --chart-1: #6a7ef7; --chart-2: #199e70; --chart-3: #c98500; --chart-4: #2e8b2e;
  --chart-5: #9d8bf0; --chart-6: #e05f5f; --chart-7: #d55181; --chart-8: #d95926;
  --chart-dim: #2c3560;
  --grid-line: rgba(160, 175, 255, 0.09);
}
[data-theme="space"] body { background-image: radial-gradient(1200px 700px at 70% -16%, #1a2352, transparent), radial-gradient(900px 600px at 8% 112%, #241a4e, transparent); }

/* ================= Minimal Monochrome ================= */
[data-theme="mono"] {
  color-scheme: light;
  --bg: #f6f6f6;
  --bg-2: #ededed;
  --surface: #ffffff;
  --surface-2: #f0f0f0;
  --border: rgba(0, 0, 0, 0.16);
  --text: #111111;
  --text-2: #444444;
  --text-3: #767676;
  --accent: #1d1d1f;
  --accent-2: #4a4a4e;
  --on-accent: #ffffff;
  --glass: 0;               /* fully solid — maximum readability */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.07);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.14);
  --radius-scale: 0.7;
  --chart-1: #1d1d1f; --chart-2: #5a5a5e; --chart-3: #8a8a8e; --chart-4: #3a3a3e;
  --chart-5: #6e6e72; --chart-6: #2c2c30; --chart-7: #9a9a9e; --chart-8: #4a4a4e;
  --chart-dim: #d4d4d4;
  --grid-line: rgba(0, 0, 0, 0.1);
}
[data-theme="mono"] body { background-image: none; }
[data-theme="mono"] .btn-primary { background: var(--accent); box-shadow: none; }
[data-theme="mono"] .fav-btn.on { color: #111; }
[data-theme="mono"] .fav-btn.on svg { fill: #111; stroke: #111; }

/* dark scrollbars follow tokens automatically via color-mix in base.css */