/**
 * Kató Attila Portfolio — theme tokens
 * Applied via data-theme on #ka-portfolio (resolved from user preference)
 */

/* ── Sötét (klasszikus) ── */
.ka-portfolio[data-theme="sotet"] {
  --ka-bg: #050508;
  --ka-bg-elevated: #0a0a0f;
  --ka-border: #1f1f28;
  --ka-text: #f5f5f7;
  --ka-text-muted: #9ca3af;
  --ka-purple: #a855f7;
  --ka-cyan: #22d3ee;
  --ka-gold: #c9a227;
  --ka-btn-primary-bg: #ffffff;
  --ka-btn-primary-text: #0a0a0a;
  --ka-nav-bg: rgba(5, 5, 8, 0.75);
  --ka-nav-bg-scrolled: rgba(5, 5, 8, 0.92);
  --ka-menu-mobile-bg: rgba(5, 5, 8, 0.98);
  --ka-footer-bg: rgba(10, 10, 15, 0.6);
  --ka-grid-line: rgba(168, 85, 247, 0.04);
  --ka-glow-radial: rgba(168, 85, 247, 0.08);
  --ka-hero-ai-color: #c4b5fd;
  --ka-hero-ai-shadow: 0 0 20px rgba(168, 85, 247, 0.9), 0 0 45px rgba(168, 85, 247, 0.45);
  --ka-hero-grad: linear-gradient(105deg, #38bdf8 0%, #22d3ee 28%, #a5f3fc 55%, #f0f9ff 78%, #ffffff 100%);
  --ka-hero-grad-filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.55)) drop-shadow(0 0 36px rgba(56, 189, 248, 0.25));
  --ka-secondary-bg: rgba(255, 255, 255, 0.06);
  --ka-secondary-border: var(--ka-border);
  --ka-secondary-hover-bg: rgba(255, 255, 255, 0.1);
  --ka-input-bg: rgba(0, 0, 0, 0.35);
  --ka-placeholder: rgba(156, 163, 175, 0.6);
  --ka-logo-filter: brightness(1.22) contrast(1.12) saturate(1.08) drop-shadow(0 0 12px rgba(212, 175, 55, 0.55)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  --ka-hero-img-filter: grayscale(0.35) saturate(0.75) brightness(0.72) contrast(1.05);
  --ka-project-grad: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(34, 211, 238, 0.08) 100%);
  --ka-project-placeholder: rgba(168, 85, 247, 0.4);
  --ka-card-hover-border: rgba(168, 85, 247, 0.3);
  --ka-icon-bg: rgba(168, 85, 247, 0.1);
  --ka-hero-shadow: 20px 0 60px rgba(0, 0, 0, 0.35);
  --ka-hero-title-shadow: 0 2px 24px rgba(0, 0, 0, 0.75);
  --ka-btn-primary-shadow: 0 8px 24px rgba(255, 255, 255, 0.12);
  --ka-link-hover-bg: rgba(255, 255, 255, 0.05);
}

/* ── Fehér (világos) ── */
.ka-portfolio[data-theme="feher"] {
  --ka-bg: #f8fafc;
  --ka-bg-elevated: #ffffff;
  --ka-border: #e2e8f0;
  --ka-text: #0f172a;
  --ka-text-muted: #64748b;
  --ka-purple: #7c3aed;
  --ka-cyan: #0891b2;
  --ka-gold: #b45309;
  --ka-btn-primary-bg: #0f172a;
  --ka-btn-primary-text: #ffffff;
  --ka-nav-bg: rgba(248, 250, 252, 0.88);
  --ka-nav-bg-scrolled: rgba(255, 255, 255, 0.96);
  --ka-menu-mobile-bg: rgba(255, 255, 255, 0.98);
  --ka-footer-bg: rgba(241, 245, 249, 0.95);
  --ka-grid-line: rgba(100, 116, 139, 0.08);
  --ka-glow-radial: rgba(124, 58, 237, 0.06);
  --ka-hero-ai-color: #6d28d9;
  --ka-hero-ai-shadow: none;
  --ka-hero-grad: linear-gradient(105deg, #0891b2 0%, #0e7490 40%, #334155 100%);
  --ka-hero-grad-filter: none;
  --ka-secondary-bg: #ffffff;
  --ka-secondary-border: #cbd5e1;
  --ka-secondary-hover-bg: #f1f5f9;
  --ka-input-bg: #ffffff;
  --ka-placeholder: rgba(100, 116, 139, 0.65);
  --ka-logo-filter: brightness(1.05) contrast(1.18) saturate(1.05) drop-shadow(0 1px 4px rgba(15, 23, 42, 0.15)) drop-shadow(0 0 8px rgba(180, 140, 40, 0.3));
  --ka-hero-img-filter: grayscale(0.2) saturate(0.85) brightness(0.95) contrast(1.02);
  --ka-project-grad: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(8, 145, 178, 0.06) 100%);
  --ka-project-placeholder: rgba(124, 58, 237, 0.35);
  --ka-card-hover-border: rgba(124, 58, 237, 0.35);
  --ka-icon-bg: rgba(124, 58, 237, 0.1);
  --ka-hero-shadow: 16px 0 48px rgba(15, 23, 42, 0.08);
  --ka-btn-primary-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  --ka-link-hover-bg: rgba(15, 23, 42, 0.04);
}

/* ── Éjszakai (dim) ── */
.ka-portfolio[data-theme="ejszakai"] {
  --ka-bg: #0a1628;
  --ka-bg-elevated: #0f1f38;
  --ka-border: #1e3a5f;
  --ka-text: #e2e8f0;
  --ka-text-muted: #94a3b8;
  --ka-purple: #818cf8;
  --ka-cyan: #38bdf8;
  --ka-gold: #d4a574;
  --ka-btn-primary-bg: #e2e8f0;
  --ka-btn-primary-text: #0a1628;
  --ka-nav-bg: rgba(10, 22, 40, 0.82);
  --ka-nav-bg-scrolled: rgba(10, 22, 40, 0.95);
  --ka-menu-mobile-bg: rgba(10, 22, 40, 0.98);
  --ka-footer-bg: rgba(15, 31, 56, 0.75);
  --ka-grid-line: rgba(56, 189, 248, 0.05);
  --ka-glow-radial: rgba(56, 189, 248, 0.07);
  --ka-hero-ai-color: #a5b4fc;
  --ka-hero-ai-shadow: 0 0 24px rgba(129, 140, 248, 0.5);
  --ka-hero-grad: linear-gradient(105deg, #38bdf8 0%, #7dd3fc 50%, #e2e8f0 100%);
  --ka-hero-grad-filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.4));
  --ka-secondary-bg: rgba(30, 58, 95, 0.45);
  --ka-secondary-border: #1e3a5f;
  --ka-secondary-hover-bg: rgba(30, 58, 95, 0.65);
  --ka-input-bg: rgba(5, 12, 24, 0.5);
  --ka-placeholder: rgba(148, 163, 184, 0.65);
  --ka-logo-filter: brightness(1.15) contrast(1.1) saturate(1.05) drop-shadow(0 0 14px rgba(129, 140, 248, 0.35)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  --ka-hero-img-filter: grayscale(0.45) saturate(0.6) brightness(0.65) contrast(1.05) hue-rotate(15deg);
  --ka-project-grad: linear-gradient(135deg, rgba(129, 140, 248, 0.12) 0%, rgba(56, 189, 248, 0.08) 100%);
  --ka-project-placeholder: rgba(129, 140, 248, 0.4);
  --ka-card-hover-border: rgba(56, 189, 248, 0.35);
  --ka-icon-bg: rgba(56, 189, 248, 0.12);
  --ka-hero-shadow: 20px 0 60px rgba(0, 0, 0, 0.45);
  --ka-btn-primary-shadow: 0 8px 24px rgba(226, 232, 240, 0.1);
  --ka-link-hover-bg: rgba(56, 189, 248, 0.08);
}

/* ── Olvasó (sepia) ── */
.ka-portfolio[data-theme="olvaso"] {
  --ka-bg: #f4ecd8;
  --ka-bg-elevated: #faf6eb;
  --ka-border: #e0d4bc;
  --ka-text: #3d3229;
  --ka-text-muted: #7a6b58;
  --ka-purple: #8b5e3c;
  --ka-cyan: #5c7a6a;
  --ka-gold: #a67c00;
  --ka-btn-primary-bg: #3d3229;
  --ka-btn-primary-text: #faf6eb;
  --ka-nav-bg: rgba(244, 236, 216, 0.92);
  --ka-nav-bg-scrolled: rgba(250, 246, 235, 0.97);
  --ka-menu-mobile-bg: rgba(250, 246, 235, 0.99);
  --ka-footer-bg: rgba(232, 220, 200, 0.9);
  --ka-grid-line: rgba(139, 94, 60, 0.07);
  --ka-glow-radial: rgba(166, 124, 0, 0.06);
  --ka-hero-ai-color: #8b5e3c;
  --ka-hero-ai-shadow: none;
  --ka-hero-grad: linear-gradient(105deg, #5c7a6a 0%, #8b5e3c 55%, #3d3229 100%);
  --ka-hero-grad-filter: none;
  --ka-secondary-bg: rgba(255, 252, 245, 0.8);
  --ka-secondary-border: #d4c4a8;
  --ka-secondary-hover-bg: #fffdf8;
  --ka-input-bg: #fffdf8;
  --ka-placeholder: rgba(122, 107, 88, 0.65);
  --ka-logo-filter: brightness(1) contrast(1.2) saturate(1.1) sepia(0.12) drop-shadow(0 1px 4px rgba(61, 50, 41, 0.2)) drop-shadow(0 0 8px rgba(166, 124, 0, 0.28));
  --ka-hero-img-filter: sepia(0.45) saturate(0.85) brightness(0.9) contrast(1.02);
  --ka-project-grad: linear-gradient(135deg, rgba(139, 94, 60, 0.1) 0%, rgba(92, 122, 106, 0.08) 100%);
  --ka-project-placeholder: rgba(139, 94, 60, 0.35);
  --ka-card-hover-border: rgba(139, 94, 60, 0.35);
  --ka-icon-bg: rgba(139, 94, 60, 0.12);
  --ka-hero-shadow: 16px 0 48px rgba(61, 50, 41, 0.1);
  --ka-btn-primary-shadow: 0 8px 20px rgba(61, 50, 41, 0.15);
  --ka-link-hover-bg: rgba(61, 50, 41, 0.05);
}

/* ── Nord (pasztell) ── */
.ka-portfolio[data-theme="nord"] {
  --ka-bg: #2e3440;
  --ka-bg-elevated: #3b4252;
  --ka-border: #4c566a;
  --ka-text: #eceff4;
  --ka-text-muted: #d8dee9;
  --ka-purple: #b48ead;
  --ka-cyan: #88c0d0;
  --ka-gold: #ebcb8b;
  --ka-btn-primary-bg: #eceff4;
  --ka-btn-primary-text: #2e3440;
  --ka-nav-bg: rgba(46, 52, 64, 0.85);
  --ka-nav-bg-scrolled: rgba(46, 52, 64, 0.96);
  --ka-menu-mobile-bg: rgba(46, 52, 64, 0.99);
  --ka-footer-bg: rgba(59, 66, 82, 0.85);
  --ka-grid-line: rgba(136, 192, 208, 0.06);
  --ka-glow-radial: rgba(180, 142, 173, 0.08);
  --ka-hero-ai-color: #d8dee9;
  --ka-hero-ai-shadow: 0 0 18px rgba(180, 142, 173, 0.45);
  --ka-hero-grad: linear-gradient(105deg, #88c0d0 0%, #b48ead 45%, #eceff4 100%);
  --ka-hero-grad-filter: drop-shadow(0 0 12px rgba(136, 192, 208, 0.35));
  --ka-secondary-bg: rgba(76, 86, 106, 0.5);
  --ka-secondary-border: #4c566a;
  --ka-secondary-hover-bg: rgba(76, 86, 106, 0.75);
  --ka-input-bg: rgba(46, 52, 64, 0.6);
  --ka-placeholder: rgba(216, 222, 233, 0.55);
  --ka-logo-filter: brightness(1.12) contrast(1.08) saturate(1.05) drop-shadow(0 0 10px rgba(136, 192, 208, 0.35)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  --ka-hero-img-filter: grayscale(0.3) saturate(0.7) brightness(0.75) hue-rotate(-8deg);
  --ka-project-grad: linear-gradient(135deg, rgba(180, 142, 173, 0.15) 0%, rgba(136, 192, 208, 0.1) 100%);
  --ka-project-placeholder: rgba(180, 142, 173, 0.45);
  --ka-card-hover-border: rgba(136, 192, 208, 0.4);
  --ka-icon-bg: rgba(136, 192, 208, 0.15);
  --ka-hero-shadow: 18px 0 56px rgba(0, 0, 0, 0.3);
  --ka-btn-primary-shadow: 0 8px 22px rgba(236, 239, 244, 0.1);
  --ka-link-hover-bg: rgba(136, 192, 208, 0.1);
}

/* ── Cyberpunk (neon) ── */
.ka-portfolio[data-theme="cyberpunk"] {
  --ka-bg: #030014;
  --ka-bg-elevated: #0a0022;
  --ka-border: #2a1050;
  --ka-text: #f0e6ff;
  --ka-text-muted: #a78bfa;
  --ka-purple: #ff00ff;
  --ka-cyan: #00fff5;
  --ka-gold: #ffd700;
  --ka-btn-primary-bg: #00fff5;
  --ka-btn-primary-text: #030014;
  --ka-nav-bg: rgba(3, 0, 20, 0.8);
  --ka-nav-bg-scrolled: rgba(3, 0, 20, 0.95);
  --ka-menu-mobile-bg: rgba(3, 0, 20, 0.99);
  --ka-footer-bg: rgba(10, 0, 34, 0.85);
  --ka-grid-line: rgba(255, 0, 255, 0.06);
  --ka-glow-radial: rgba(0, 255, 245, 0.1);
  --ka-hero-ai-color: #ff66ff;
  --ka-hero-ai-shadow: 0 0 24px rgba(255, 0, 255, 0.9), 0 0 48px rgba(255, 0, 255, 0.4);
  --ka-hero-grad: linear-gradient(105deg, #00fff5 0%, #ff00ff 40%, #ffffff 85%);
  --ka-hero-grad-filter: drop-shadow(0 0 20px rgba(0, 255, 245, 0.7)) drop-shadow(0 0 30px rgba(255, 0, 255, 0.4));
  --ka-secondary-bg: rgba(255, 0, 255, 0.08);
  --ka-secondary-border: #2a1050;
  --ka-secondary-hover-bg: rgba(0, 255, 245, 0.1);
  --ka-input-bg: rgba(0, 0, 0, 0.45);
  --ka-placeholder: rgba(167, 139, 250, 0.55);
  --ka-logo-filter: brightness(1.25) contrast(1.15) saturate(1.25) drop-shadow(0 0 14px rgba(255, 0, 255, 0.45)) drop-shadow(0 0 10px rgba(0, 255, 245, 0.35));
  --ka-hero-img-filter: grayscale(0.5) saturate(1.3) brightness(0.55) contrast(1.15) hue-rotate(280deg);
  --ka-project-grad: linear-gradient(135deg, rgba(255, 0, 255, 0.18) 0%, rgba(0, 255, 245, 0.1) 100%);
  --ka-project-placeholder: rgba(255, 0, 255, 0.45);
  --ka-card-hover-border: rgba(0, 255, 245, 0.45);
  --ka-icon-bg: rgba(255, 0, 255, 0.15);
  --ka-hero-shadow: 24px 0 70px rgba(255, 0, 255, 0.15);
  --ka-btn-primary-shadow: 0 8px 28px rgba(0, 255, 245, 0.35);
  --ka-link-hover-bg: rgba(255, 0, 255, 0.1);
}

/* Default before JS: system → dark */
.ka-portfolio:not([data-theme]) {
  --ka-bg: #050508;
  --ka-bg-elevated: #0a0a0f;
  --ka-border: #1f1f28;
  --ka-text: #f5f5f7;
  --ka-text-muted: #9ca3af;
  --ka-purple: #a855f7;
  --ka-cyan: #22d3ee;
  --ka-gold: #c9a227;
  --ka-btn-primary-bg: #ffffff;
  --ka-btn-primary-text: #0a0a0a;
  --ka-nav-bg: rgba(5, 5, 8, 0.75);
  --ka-nav-bg-scrolled: rgba(5, 5, 8, 0.92);
  --ka-menu-mobile-bg: rgba(5, 5, 8, 0.98);
  --ka-footer-bg: rgba(10, 10, 15, 0.6);
  --ka-grid-line: rgba(168, 85, 247, 0.04);
  --ka-glow-radial: rgba(168, 85, 247, 0.08);
  --ka-hero-ai-color: #c4b5fd;
  --ka-hero-ai-shadow: 0 0 20px rgba(168, 85, 247, 0.9), 0 0 45px rgba(168, 85, 247, 0.45);
  --ka-hero-grad: linear-gradient(105deg, #38bdf8 0%, #22d3ee 28%, #a5f3fc 55%, #f0f9ff 78%, #ffffff 100%);
  --ka-hero-grad-filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.55)) drop-shadow(0 0 36px rgba(56, 189, 248, 0.25));
  --ka-secondary-bg: rgba(255, 255, 255, 0.06);
  --ka-secondary-border: var(--ka-border);
  --ka-secondary-hover-bg: rgba(255, 255, 255, 0.1);
  --ka-input-bg: rgba(0, 0, 0, 0.35);
  --ka-placeholder: rgba(156, 163, 175, 0.6);
  --ka-logo-filter: brightness(1.22) contrast(1.12) saturate(1.08) drop-shadow(0 0 12px rgba(212, 175, 55, 0.55)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  --ka-hero-img-filter: grayscale(0.35) saturate(0.75) brightness(0.72) contrast(1.05);
  --ka-project-grad: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(34, 211, 238, 0.08) 100%);
  --ka-project-placeholder: rgba(168, 85, 247, 0.4);
  --ka-card-hover-border: rgba(168, 85, 247, 0.3);
  --ka-icon-bg: rgba(168, 85, 247, 0.1);
  --ka-hero-shadow: 20px 0 60px rgba(0, 0, 0, 0.35);
  --ka-hero-title-shadow: 0 2px 24px rgba(0, 0, 0, 0.75);
  --ka-btn-primary-shadow: 0 8px 24px rgba(255, 255, 255, 0.12);
  --ka-link-hover-bg: rgba(255, 255, 255, 0.05);
}