/* Ulkoasuehdotukset. Valitaan osoitteella ?teema=<nimi>. Oletus (verkkosivujen ilme) on app.css:ssä. */

/* Vaihtoehtoisten teemojen yhteiset lähtöarvot */
[data-theme] {
  --messages-bg: transparent; --surface-2: #f1eee7; --theirs-bg: #f1eee7; --reason-bg: var(--surface-2);
  --status-new-bg: #fff4e5; --status-new-text: #8a5a12; --avatar-bg: var(--tag-bg); --avatar-text: var(--tag-text);
  --font: 'Inter', system-ui, sans-serif; --font-head: 'Fraunces', Georgia, serif; --head-weight: 600;
  --radius: 14px; --radius-sm: 8px; --bubble-radius: 16px; --bubble-tail: 4px; --btn-radius: 10px; --avatar-radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .05); --topbar-bg: #ffffff;
}

/* 1. Klassinen – tummansininen ja kulta */
[data-theme="klassinen"] {
  --bg: #f6f4ef; --surface: #ffffff; --surface-2: #f1eee7; --text: #1d2330; --muted: #667085; --border: #e4dfd4;
  --primary: #1f3a5f; --accent: #b8893b; --mine-bg: #1f3a5f; --theirs-bg: #f1eee7; --theirs-text: #1d2330;
  --tag-bg: #eef1f6; --tag-text: #1f3a5f; --topbar-bg: #ffffff;
}

/* 2. Pohjoinen – skandinaavinen minimalismi */
[data-theme="pohjoinen"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f5f7; --text: #111111; --muted: #6b6b6b; --border: #e6e6e6;
  --primary: #111111; --accent: #2f6bff; --mine-bg: #111111; --theirs-bg: #f4f5f7; --theirs-text: #111;
  --tag-bg: #f4f5f7; --tag-text: #111; --radius: 6px; --radius-sm: 4px; --bubble-radius: 6px; --btn-radius: 4px;
  --shadow: none; --font-head: 'Inter', sans-serif; --head-weight: 700; --head-tracking: -0.03em; --brand-radius: 4px;
  --tab-active-bg: #111; --tab-active-text: #fff; --cta-bg: #f4f5f7; --cta-text: #111; --cta-btn-bg: #111; --cta-btn-text: #fff;
}

/* 3. Metsä – vihreä ja kerma */
[data-theme="metsa"] {
  --bg: #f3f1e8; --surface: #fffdf6; --surface-2: #ebe8da; --text: #1f2a22; --muted: #5f6b60; --border: #ddd8c4;
  --primary: #24533a; --accent: #c08a2e; --mine-bg: #24533a; --theirs-bg: #ebe8da; --theirs-text: #1f2a22;
  --tag-bg: #e2ebe1; --tag-text: #24533a; --topbar-bg: #24533a; --topbar-text: #f3f1e8; --topbar-border: 0;
  --font-head: 'Lora', Georgia, serif; --head-weight: 700; --tab-active-bg: rgba(255,255,255,.16); --tab-active-text: #fff;
  --radius: 12px; --bubble-radius: 18px;
}

/* 4. Yö – tumma sinikulta */
[data-theme="yo"] {
  --tag-strong-text: #1a1406;
  color-scheme: dark;
  --bg: #0d1424; --surface: #141d31; --surface-2: #1c2741; --text: #e8ecf5; --muted: #93a0bb; --border: #26324f;
  --primary: #d6a94a; --primary-text: #1a1406; --accent: #d6a94a; --mine-bg: #d6a94a; --mine-text: #1a1406;
  --theirs-bg: #1c2741; --theirs-text: #e8ecf5; --tag-bg: #1f2b47; --tag-text: #d6c9a6; --topbar-bg: #0d1424; --topbar-text: #e8ecf5;
  --shadow: 0 10px 30px rgba(0,0,0,.35); --brand-mark-text: #1a1406; --input-bg: #0f1729; --reason-bg: #1a2440;
  --cta-bg: #1c2741; --cta-text: #e8ecf5; --cta-btn-bg: #d6a94a; --cta-btn-text: #1a1406;
}

/* 5. Graniitti – brutalistinen, terävät kulmat */
[data-theme="graniitti"] {
  --bg: #e9e9e6; --surface: #ffffff; --surface-2: #f2f2ef; --text: #000; --muted: #555; --border: #000;
  --primary: #000; --accent: #ff4d00; --mine-bg: #000; --theirs-bg: #fff; --theirs-text: #000;
  --tag-bg: #fff; --tag-text: #000; --radius: 0; --radius-sm: 0; --bubble-radius: 0; --btn-radius: 0; --bubble-tail: 0;
  --shadow: 6px 6px 0 #000; --panel-border: 2px solid #000; --bubble-border: 2px solid #000; --topbar-border: 2px solid #000;
  --font: 'Space Grotesk', sans-serif; --font-head: 'Space Grotesk', sans-serif; --head-weight: 700; --brand-radius: 0;
  --btn-shadow: 3px 3px 0 #ff4d00; --avatar-radius: 0; --card-shadow: 4px 4px 0 #000; --tab-active-bg: #ff4d00; --tab-active-text: #000;
}

/* 6. Revontuli – liukuväri ja lasipinnat */
[data-theme="revontuli"] {
  color-scheme: dark;
  --bg: #0b1026; --bg-image: radial-gradient(1200px 600px at 10% -10%, #1fd1a5 0%, transparent 55%), radial-gradient(900px 600px at 100% 0%, #7b4dff 0%, transparent 55%), radial-gradient(800px 500px at 50% 120%, #1a6dff 0%, transparent 60%);
  --surface: rgba(255,255,255,.08); --surface-2: rgba(255,255,255,.12); --text: #f2f5ff; --muted: #b6bfdc; --border: rgba(255,255,255,.18);
  --primary: #3ee6b8; --primary-text: #04241b; --accent: #8e6bff; --mine-bg: linear-gradient(135deg, #3ee6b8, #4d8dff); --mine-text: #04241b;
  --theirs-bg: rgba(255,255,255,.12); --theirs-text: #f2f5ff; --tag-bg: rgba(255,255,255,.12); --tag-text: #e6ebff;
  --topbar-bg: rgba(11,16,38,.4); --topbar-text: #fff; --input-bg: rgba(0,0,0,.25); --card-bg: rgba(255,255,255,.06); --reason-bg: rgba(255,255,255,.08);
  --shadow: 0 20px 50px rgba(0,0,0,.35); --radius: 20px; --bubble-radius: 18px; --btn-radius: 99px;
  --cta-bg: rgba(255,255,255,.1); --cta-text: #fff; --cta-btn-bg: #3ee6b8; --cta-btn-text: #04241b;
}
[data-theme="revontuli"] body { background-attachment: fixed; }
[data-theme="revontuli"] .panel, [data-theme="revontuli"] .hero-card, [data-theme="revontuli"] .step, [data-theme="revontuli"] .topbar { backdrop-filter: blur(16px); }
[data-theme="revontuli"] .bubble.mine { background: var(--mine-bg); }

/* 7. Sammal – pehmeä pastelli */
[data-theme="sammal"] {
  --bg: #eef2ea; --surface: #ffffff; --surface-2: #f2f6ee; --text: #2b3328; --muted: #6f7a6a; --border: #dfe6d8;
  --primary: #5b7f4e; --accent: #e3a16b; --mine-bg: #5b7f4e; --theirs-bg: #f2f6ee; --theirs-text: #2b3328;
  --tag-bg: #e6eedf; --tag-text: #4a6a3f; --radius: 26px; --radius-sm: 16px; --bubble-radius: 22px; --btn-radius: 99px;
  --font-head: 'Inter', sans-serif; --head-weight: 600; --shadow: 0 8px 24px rgba(91,127,78,.10); --panel-border: 0;
  --avatar-radius: 99px; --brand-radius: 99px; --topbar-bg: transparent; --topbar-border: 0;
}

/* 8. Viininpunainen – perinteinen asianajotoimisto */
[data-theme="viini"] {
  --bg: #f7f2ea; --surface: #fffcf7; --surface-2: #f1e9dc; --text: #2a1a1c; --muted: #7a6466; --border: #e5d8c6;
  --primary: #6e1f2c; --accent: #a8823f; --mine-bg: #6e1f2c; --theirs-bg: #f1e9dc; --theirs-text: #2a1a1c;
  --tag-bg: #f3e3e3; --tag-text: #6e1f2c; --topbar-bg: #6e1f2c; --topbar-text: #fbf3e6; --topbar-border: 3px solid #a8823f;
  --font-head: 'Lora', Georgia, serif; --head-weight: 700; --radius: 4px; --radius-sm: 3px; --bubble-radius: 10px; --btn-radius: 3px;
  --tab-active-bg: rgba(255,255,255,.14); --tab-active-text: #fff;
}

/* 9. Meri – kirkas sininen, fintech-henkinen */
[data-theme="meri"] {
  --tag-strong-text: #04313b;
  --bg: #f2f6fc; --surface: #ffffff; --surface-2: #eef3fb; --text: #0e1b33; --muted: #5d6b85; --border: #dfe7f3;
  --primary: #0a66ff; --accent: #00b8d9; --mine-bg: #0a66ff; --theirs-bg: #eef3fb; --theirs-text: #0e1b33;
  --tag-bg: #e6f0ff; --tag-text: #0a4fc4; --topbar-bg: #0a66ff; --topbar-text: #fff; --topbar-border: 0;
  --font-head: 'Inter', sans-serif; --head-weight: 700; --head-tracking: -0.02em; --radius: 16px; --btn-radius: 12px;
  --tab-active-bg: #fff; --tab-active-text: #0a66ff; --btn-shadow: 0 6px 16px rgba(10,102,255,.25);
}

/* 10. Hiekka – lämmin terrakotta */
[data-theme="hiekka"] {
  --bg: #f6ede3; --surface: #fffaf4; --surface-2: #f2e5d6; --text: #3a2618; --muted: #8a6f5c; --border: #ead9c6;
  --primary: #c2562f; --accent: #2f6b5e; --mine-bg: #c2562f; --theirs-bg: #f2e5d6; --theirs-text: #3a2618;
  --tag-bg: #f6e1d6; --tag-text: #9a3f1f; --font-head: 'Fraunces', serif; --head-weight: 700;
  --radius: 18px; --bubble-radius: 20px; --btn-radius: 99px; --shadow: 0 6px 20px rgba(130,80,40,.08);
}

/* 11. Hiili – tumma tekninen, limenvihreä korostus */
[data-theme="hiili"] {
  --tag-strong-text: #0f1012;
  color-scheme: dark;
  --bg: #0f1012; --surface: #17191c; --surface-2: #1f2226; --text: #e9ecef; --muted: #8b9198; --border: #2a2e33;
  --primary: #c6f432; --primary-text: #0f1012; --accent: #c6f432; --mine-bg: #c6f432; --mine-text: #0f1012;
  --theirs-bg: #1f2226; --theirs-text: #e9ecef; --tag-bg: #23272c; --tag-text: #c6f432; --topbar-bg: #0f1012; --topbar-text: #e9ecef;
  --font: 'Space Grotesk', sans-serif; --font-head: 'Space Grotesk', sans-serif; --head-weight: 700; --brand-mark-text: #0f1012;
  --shadow: none; --radius: 10px; --btn-radius: 8px; --input-bg: #121417; --reason-bg: #1c2023;
  --cta-bg: #c6f432; --cta-text: #0f1012; --cta-btn-bg: #0f1012; --cta-btn-text: #c6f432;
}

/* 12. Paperi – toimituksellinen sanomalehtityyli */
[data-theme="paperi"] {
  --bg: #f5f1e8; --surface: #fbf8f1; --surface-2: #efe9dc; --text: #1a1a1a; --muted: #5c5a55; --border: #1a1a1a;
  --primary: #1a1a1a; --accent: #c0392b; --mine-bg: #1a1a1a; --theirs-bg: transparent; --theirs-text: #1a1a1a;
  --tag-bg: transparent; --tag-text: #1a1a1a; --font: 'Lora', Georgia, serif; --font-head: 'Fraunces', serif; --head-weight: 700;
  --radius: 0; --radius-sm: 0; --bubble-radius: 0; --bubble-tail: 0; --btn-radius: 0; --shadow: none; --brand-radius: 0;
  --bubble-border: 1px solid #1a1a1a; --topbar-border: 3px double #1a1a1a; --avatar-radius: 0;
}
[data-theme="paperi"] .tag { border: 1px solid #1a1a1a; border-radius: 0; }
[data-theme="paperi"] .brand { font-size: 1.6rem; letter-spacing: -0.02em; }

/* 13. Lumi – ilmava jäänsininen, suositukset vasemmalla */
[data-theme="lumi"] {
  --tag-strong-text: #0d3a5c;
  --bg: #f4f9fd; --bg-image: linear-gradient(180deg, #e3f1fb 0, #f4f9fd 320px); --surface: #ffffff; --surface-2: #eef6fc; --text: #16324a; --muted: #6a8299; --border: #dceaf5;
  --primary: #2a8bd6; --accent: #7cc4ef; --mine-bg: #2a8bd6; --theirs-bg: #eef6fc; --theirs-text: #16324a;
  --tag-bg: #e3f1fb; --tag-text: #1f6fae; --font-head: 'Inter', sans-serif; --head-weight: 600; --topbar-bg: transparent; --topbar-border: 0;
  --radius: 22px; --bubble-radius: 20px; --btn-radius: 14px; --shadow: 0 12px 40px rgba(42,139,214,.10); --panel-border: 0;
  --side-order: -1; --chat-cols: minmax(320px, 1fr) minmax(0, 1.5fr); --brand-mark-text: #fff;
}

/* 14. Kulta – musta ja kulta, premium */
[data-theme="kulta"] {
  --tag-strong-text: #0a0a0a;
  color-scheme: dark;
  --bg: #0a0a0a; --surface: #121212; --surface-2: #1b1b1b; --text: #f3efe6; --muted: #9d968a; --border: #2b2720;
  --primary: #c9a45c; --primary-text: #0a0a0a; --accent: #c9a45c; --mine-bg: #1b1b1b; --mine-text: #f3e6c8;
  --theirs-bg: transparent; --theirs-text: #f3efe6; --bubble-border: 1px solid #2b2720; --tag-bg: transparent; --tag-text: #c9a45c;
  --topbar-bg: #0a0a0a; --topbar-text: #f3efe6; --font-head: 'Fraunces', serif; --head-weight: 500; --head-tracking: 0.01em;
  --radius: 2px; --radius-sm: 2px; --bubble-radius: 2px; --bubble-tail: 2px; --btn-radius: 2px; --shadow: none; --brand-mark-text: #0a0a0a;
  --input-bg: #0e0e0e; --reason-bg: #161410; --cta-bg: #121212; --cta-text: #f3efe6; --cta-btn-bg: #c9a45c; --cta-btn-text: #0a0a0a;
}
[data-theme="kulta"] .tag { border: 1px solid #5a4a2a; }
[data-theme="kulta"] .bubble.mine { border: 1px solid #c9a45c; }

/* 15. Leikki – rohkea ja leikkisä */
[data-theme="leikki"] {
  --tag-strong-text: #231942;
  --bg: #fff7e8; --surface: #ffffff; --surface-2: #fff1d6; --text: #231942; --muted: #6b5f86; --border: #231942;
  --primary: #ff5a5f; --accent: #ffbe0b; --mine-bg: #5e3bee; --theirs-bg: #fff1d6; --theirs-text: #231942;
  --tag-bg: #e9e3ff; --tag-text: #5e3bee; --font: 'Space Grotesk', sans-serif; --font-head: 'Space Grotesk', sans-serif; --head-weight: 700;
  --radius: 24px; --radius-sm: 16px; --bubble-radius: 22px; --btn-radius: 99px; --panel-border: 2px solid #231942;
  --shadow: 5px 5px 0 #231942; --btn-shadow: 3px 3px 0 #231942; --brand-mark-text: #231942; --brand-radius: 99px; --avatar-radius: 99px;
  --avatar-bg: #ffbe0b; --avatar-text: #231942; --card-shadow: 3px 3px 0 #231942; --topbar-border: 2px solid #231942;
  --cta-bg: #5e3bee; --cta-text: #fff; --cta-btn-bg: #ffbe0b; --cta-btn-text: #231942;
}
[data-theme="leikki"] .btn-primary { border: 2px solid #231942; }

/* Tummat teemat: tilapallerot */
[data-theme="yo"] .status-uusi, [data-theme="hiili"] .status-uusi, [data-theme="kulta"] .status-uusi, [data-theme="revontuli"] .status-uusi { background: #3a2a10; color: #f5c46b; }

/* "verkkosivu" = oletusilme (app.css) */