From 3a00de9b8e1700fffe46e09052111255a1160051 Mon Sep 17 00:00:00 2001
From: jaakko <jaakko@kipina.tech>
Date: Mon, 13 Apr 2026 14:22:33 +0300
Subject: [PATCH] =?UTF-8?q?Kolme=20kipina.tech-teemaa:=20gecko,=20forge,?=
 =?UTF-8?q?=20serpent=20=E2=80=94=20satunnaisvalinta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tuodaan kipina.techin kolme visuaalista teemaa kipina.studioon:
- gecko: lämmin kulta/oranssi (#ff7b00)
- forge: kyber-sininen/syaani (#00e5ff)
- serpent: neon-turkoosi (#00ffff)

Teema arvotaan satunnaisesti joka sivulatauksella. Kaikki aiemmin
hardcoodatut #ff6b00-aksenttivärit korvattu CSS-muuttujilla
(--hero-accent, --hero-glow) jotka mukautuvat teemaan.
---
 network-poc/frontend/src/pages/index.astro |  7 ++
 network-poc/frontend/src/styles/global.css | 74 ++++++++++++++++++----
 2 files changed, 68 insertions(+), 13 deletions(-)

diff --git a/network-poc/frontend/src/pages/index.astro b/network-poc/frontend/src/pages/index.astro
index 6fdc109..b331837 100644
--- a/network-poc/frontend/src/pages/index.astro
+++ b/network-poc/frontend/src/pages/index.astro
@@ -136,6 +136,13 @@ import Settings from "../components/Settings.astro";
     </div>
 
     <script is:inline>
+    // === Teeman satunnaisvalinta (gecko/forge/serpent) ===
+    (function() {
+        const themes = ['gecko', 'forge', 'serpent'];
+        const theme = themes[Math.floor(Math.random() * themes.length)];
+        document.documentElement.setAttribute('data-theme', theme);
+    })();
+
     // === Helpers ===
     window.showJoinDialog = function() {
         const d = document.getElementById('join-dialog');
diff --git a/network-poc/frontend/src/styles/global.css b/network-poc/frontend/src/styles/global.css
index 15adc0c..9acf5ca 100644
--- a/network-poc/frontend/src/styles/global.css
+++ b/network-poc/frontend/src/styles/global.css
@@ -1,3 +1,4 @@
+/* Oletusvärit — ylikirjoitetaan teemalla */
 :root {
     --bg: #0d1117;
     --panel: #161b22;
@@ -8,6 +9,53 @@
     --red: #f85149;
     --purple: #a371f7;
     --border: #30363d;
+    --hero-accent: #ff6b00;
+    --hero-glow: rgba(255, 107, 0, 0.15);
+}
+
+/* Gecko — lämmin kulta/oranssi (kipina.tech) */
+[data-theme="gecko"] {
+    --bg: #0a0500;
+    --panel: #1f1000;
+    --text: #fff5e6;
+    --accent: #ff7b00;
+    --green: #3fb950;
+    --yellow: #ffae00;
+    --red: #f85149;
+    --purple: #ff9d4d;
+    --border: rgba(255, 174, 0, 0.2);
+    --hero-accent: #ff7b00;
+    --hero-glow: rgba(255, 123, 0, 0.15);
+}
+
+/* Forge — kyber-sininen/syaani (kipina.tech) */
+[data-theme="forge"] {
+    --bg: #060b11;
+    --panel: #121e2d;
+    --text: #e0f2fe;
+    --accent: #00e5ff;
+    --green: #3fb950;
+    --yellow: #ff5e3a;
+    --red: #f85149;
+    --purple: #7dd3fc;
+    --border: rgba(0, 229, 255, 0.15);
+    --hero-accent: #00e5ff;
+    --hero-glow: rgba(0, 229, 255, 0.15);
+}
+
+/* Serpent — neon-turkoosi/teal (kipina.tech) */
+[data-theme="serpent"] {
+    --bg: #000808;
+    --panel: #001e1e;
+    --text: #ccffff;
+    --accent: #00ffff;
+    --green: #00ffaa;
+    --yellow: #d29922;
+    --red: #f85149;
+    --purple: #66cccc;
+    --border: rgba(0, 255, 255, 0.15);
+    --hero-accent: #00ffff;
+    --hero-glow: rgba(0, 255, 255, 0.15);
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -235,7 +283,7 @@ body {
 .bg-mesh {
     position: fixed; inset: 0; z-index: -1;
     background:
-        radial-gradient(ellipse 80% 60% at 20% 40%, rgba(255,107,0,0.08) 0%, transparent 70%),
+        radial-gradient(ellipse 80% 60% at 20% 40%, var(--hero-glow) 0%, transparent 70%),
         radial-gradient(ellipse 60% 50% at 80% 20%, rgba(88,166,255,0.06) 0%, transparent 70%),
         var(--bg);
 }
@@ -244,7 +292,7 @@ body {
     padding: 20px 40px;
 }
 .landing-logo { text-decoration: none; font-size: 18px; font-weight: 700; }
-.logo-accent { color: #ff6b00; }
+.logo-accent { color: var(--hero-accent); }
 .logo-sub { color: #8b949e; font-weight: 400; }
 
 /* Hero */
@@ -260,7 +308,7 @@ body {
     line-height: 1.15; color: #e6edf3; margin-bottom: 16px;
 }
 .hero-divider {
-    width: 60px; height: 3px; background: #ff6b00;
+    width: 60px; height: 3px; background: var(--hero-accent);
     border-radius: 2px; margin-bottom: 20px;
 }
 .hero-desc {
@@ -283,7 +331,7 @@ body {
     outline: none; transition: border-color 0.2s;
 }
 .hero-input:focus {
-    border-color: #ff6b00; box-shadow: 0 0 0 3px rgba(255,107,0,0.15);
+    border-color: var(--hero-accent); box-shadow: 0 0 0 3px var(--hero-glow);
 }
 .hero-input::placeholder { color: #484f58; }
 .hero-input.shake {
@@ -299,11 +347,11 @@ body {
 .hero-btn {
     padding: 14px 28px; font-size: 16px; font-weight: 600;
     font-family: 'Inter', sans-serif;
-    background: #ff6b00; color: #fff; border: none; border-radius: 8px;
+    background: var(--hero-accent); color: #fff; border: none; border-radius: 8px;
     cursor: pointer; transition: background 0.2s, transform 0.1s;
     white-space: nowrap;
 }
-.hero-btn:hover { background: #e05e00; transform: translateY(-1px); }
+.hero-btn:hover { filter: brightness(0.85); transform: translateY(-1px); }
 .hero-btn:active { transform: translateY(0); }
 
 /* Example buttons */
@@ -325,13 +373,13 @@ body {
 }
 .hero-orb {
     width: 340px; height: 340px; border-radius: 50%;
-    background: radial-gradient(circle at 30% 30%, rgba(255,107,0,0.15) 0%, transparent 70%);
+    background: radial-gradient(circle at 30% 30%, var(--hero-glow) 0%, transparent 70%);
     display: flex; align-items: center; justify-content: center;
     animation: orb-float 6s ease-in-out infinite;
 }
 .hero-orb-img {
     width: 100%; height: 100%; object-fit: contain;
-    filter: drop-shadow(0 0 40px rgba(255,107,0,0.25));
+    filter: drop-shadow(0 0 40px var(--hero-glow));
 }
 @keyframes orb-float {
     0%, 100% { transform: translateY(0); }
@@ -357,11 +405,11 @@ body {
     background: var(--panel); border: 1px solid var(--border);
     border-radius: 12px; transition: border-color 0.3s;
 }
-.how-step:hover { border-color: rgba(255,107,0,0.4); }
+.how-step:hover { border-color: var(--hero-accent); }
 .how-step-num {
     width: 40px; height: 40px; line-height: 40px;
-    border-radius: 50%; background: rgba(255,107,0,0.12);
-    color: #ff6b00; font-weight: 700; font-size: 18px;
+    border-radius: 50%; background: var(--hero-glow);
+    color: var(--hero-accent); font-weight: 700; font-size: 18px;
     margin: 0 auto 14px;
 }
 .how-step h3 { color: #e6edf3; font-size: 1rem; margin-bottom: 8px; }
@@ -397,8 +445,8 @@ body {
 .learn-step-header:hover { background: rgba(88,166,255,0.04); }
 .learn-step-num {
     width: 28px; height: 28px; line-height: 28px; text-align: center;
-    border-radius: 50%; background: rgba(255,107,0,0.12);
-    color: #ff6b00; font-weight: 700; font-size: 13px; flex-shrink: 0;
+    border-radius: 50%; background: var(--hero-glow);
+    color: var(--hero-accent); font-weight: 700; font-size: 13px; flex-shrink: 0;
 }
 .learn-step-agent {
     font-weight: 600; color: #e6edf3; font-size: 14px;