/* ==========================================================================
   JPP Theme System - Distinctive & Bold
   4 themes: academic, retro-future, bd-lanturlu, cosmos
   Designed to avoid generic AI aesthetics
   ========================================================================== */

/* ==========================================================================
   THEME 1: ACADEMIC
   Inspiration: High-end scientific journals, editorial design, museum catalogs
   Tone: Refined, intellectual, timeless elegance
   ========================================================================== */
[data-theme="academic"] {
  /* Warm paper tones - NOT generic white/gray */
  --color-bg-primary: #FAF8F5;
  --color-bg-secondary: #FFFEFB;
  --color-bg-tertiary: #F0EDE8;
  --color-bg-accent: #E8E4DC;

  /* Deep ink colors for excellent readability */
  --color-text-primary: #1C1917;
  --color-text-secondary: #44403C;
  --color-text-muted: #78716C;
  --color-text-inverse: #FAF8F5;

  /* Rich navy blue - scholarly, trustworthy */
  --color-accent-primary: #1E3A5F;
  --color-accent-secondary: #2D5A87;
  --color-accent-hover: #14283F;
  --color-accent-tertiary: #8B4513;

  --color-border: #D6D3CD;
  --color-border-strong: #A8A29E;

  --color-success: #166534;
  --color-warning: #A16207;
  --color-error: #991B1B;

  /* Typography: Elegant serif for headings, readable sans for body */
  --font-heading: 'Crimson Pro', 'Libre Baskerville', Georgia, serif;
  --font-body: 'DM Sans', 'Nunito Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;

  /* Refined, subtle curves */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;

  /* Subtle, sophisticated shadows */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04), 0 1px 3px rgba(28, 25, 23, 0.06);
  --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.05), 0 2px 4px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 10px 25px rgba(28, 25, 23, 0.08), 0 6px 10px rgba(28, 25, 23, 0.05);

  /* Elegant understated gradient */
  --gradient-hero: linear-gradient(135deg, #1E3A5F 0%, #2D5A87 60%, #3D6A97 100%);
  --gradient-subtle: linear-gradient(180deg, #FAF8F5 0%, #F0EDE8 100%);

  --header-bg: #FFFEFB;
  --header-border: #E8E4DC;
  --footer-bg: #F0EDE8;

  /* Paper texture overlay */
  --bg-pattern: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ==========================================================================
   THEME 2: RETRO-FUTURE
   Inspiration: Synthwave, Outrun, 80s sci-fi, Blade Runner, Tron
   Tone: Electric, nostalgic, high-energy, neon-lit nights
   ========================================================================== */
[data-theme="retro-future"] {
  /* Deep space black with purple undertones */
  --color-bg-primary: #0D0D1A;
  --color-bg-secondary: #141428;
  --color-bg-tertiary: #1A1A35;
  --color-bg-accent: #2A1A4A;

  /* High contrast neon-friendly text */
  --color-text-primary: #F0F0FF;
  --color-text-secondary: #B8B8D0;
  --color-text-muted: #7878A0;
  --color-text-inverse: #0D0D1A;

  /* Electric neon palette */
  --color-accent-primary: #FF2A6D;
  --color-accent-secondary: #05D9E8;
  --color-accent-hover: #FF5588;
  --color-accent-tertiary: #D300C5;
  --color-neon-yellow: #FFE66D;

  --color-border: #2A2A50;
  --color-border-strong: #FF2A6D;
  --color-border-glow: 0 0 15px rgba(255, 42, 109, 0.5);

  --color-success: #05D9E8;
  --color-warning: #FFE66D;
  --color-error: #FF2A6D;

  /* Bold, geometric, futuristic fonts */
  --font-heading: 'Orbitron', 'Audiowide', 'Rajdhani', sans-serif;
  --font-body: 'Exo 2', 'Rajdhani', 'Michroma', sans-serif;
  --font-mono: 'Share Tech Mono', 'VT323', monospace;

  /* Sharp, angular feel */
  --radius-sm: 0;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-xl: 6px;

  /* Neon glow shadows */
  --shadow-sm: 0 0 10px rgba(255, 42, 109, 0.2), 0 0 20px rgba(5, 217, 232, 0.1);
  --shadow-md: 0 0 20px rgba(255, 42, 109, 0.3), 0 0 40px rgba(5, 217, 232, 0.15);
  --shadow-lg: 0 0 40px rgba(255, 42, 109, 0.4), 0 0 80px rgba(211, 0, 197, 0.2);

  /* Dramatic gradient */
  --gradient-hero: linear-gradient(135deg, #FF2A6D 0%, #D300C5 50%, #05D9E8 100%);
  --gradient-card: linear-gradient(180deg, #141428 0%, #1A1A35 100%);
  --gradient-sunset: linear-gradient(180deg, #FF2A6D 0%, #D300C5 40%, #05D9E8 100%);

  --header-bg: linear-gradient(90deg, rgba(13, 13, 26, 0.98) 0%, rgba(20, 20, 40, 0.98) 100%);
  --header-border: #FF2A6D;
  --footer-bg: #0A0A15;

  /* Retro grid pattern */
  --bg-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h60v60H0z' fill='none' stroke='%23FF2A6D' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E");

  /* Scanline effect */
  --scanline: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
}

/* ==========================================================================
   THEME 3: BD LANTURLU
   Inspiration: Franco-Belgian comics, Tintin, Spirou, Pop Art
   Tone: Playful, bold, energetic, hand-drawn feel
   ========================================================================== */
[data-theme="bd-lanturlu"] {
  /* Warm cream paper like comic book pages */
  --color-bg-primary: #FFF9E8;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #FFF3D6;
  --color-bg-accent: #E3F6F1;

  /* Bold ink black for strong contrast */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #333333;
  --color-text-muted: #666666;
  --color-text-inverse: #FFFFFF;

  /* Primary colors - bold and playful */
  --color-accent-primary: #0066CC;
  --color-accent-secondary: #00AA55;
  --color-accent-hover: #0055AA;
  --color-accent-tertiary: #FFCC00;
  --color-accent-red: #EE4444;
  --color-accent-orange: #FF8800;

  --color-border: #1A1A1A;
  --color-border-strong: #000000;
  --color-border-comic: 3px solid #1A1A1A;

  --color-success: #00AA55;
  --color-warning: #FFCC00;
  --color-error: #EE4444;

  /* Comic-style fonts - Comic Neue is more readable for headings */
  --font-heading: 'Comic Neue', 'Nunito', cursive;
  --font-body: 'Comic Neue', 'Nunito', 'Patrick Hand', sans-serif;
  --font-mono: 'Source Code Pro', monospace;

  /* Bangers reserved for special accent text */
  --font-display: 'Bangers', cursive;
  --heading-letter-spacing: 0.02em;
  --heading-font-weight: 700;

  /* Rounded, friendly shapes */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Bold offset shadows like comic panels */
  --shadow-sm: 3px 3px 0 #1A1A1A;
  --shadow-md: 5px 5px 0 #1A1A1A;
  --shadow-lg: 8px 8px 0 #1A1A1A;

  /* Fun colorful gradient */
  --gradient-hero: linear-gradient(135deg, #0066CC 0%, #00AA55 50%, #FFCC00 100%);
  --gradient-rainbow: linear-gradient(90deg, #EE4444, #FF8800, #FFCC00, #00AA55, #0066CC);

  --header-bg: linear-gradient(90deg, #0066CC 0%, #00AA55 50%, #FFCC00 100%);
  --header-border: transparent;
  --footer-bg: #0066CC;

  /* Halftone dot pattern */
  --bg-pattern: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='2' fill='%231A1A1A' fill-opacity='0.04'/%3E%3C/svg%3E");
}

/* ==========================================================================
   THEME 4: COSMOS
   Inspiration: Deep space, nebulae, observatories, cosmic wonder
   Tone: Mysterious, vast, awe-inspiring, contemplative
   ========================================================================== */
[data-theme="cosmos"] {
  /* True deep space darkness */
  --color-bg-primary: #050510;
  --color-bg-secondary: #0A0A1F;
  --color-bg-tertiary: #10102A;
  --color-bg-accent: #1A1040;

  /* Starlight text */
  --color-text-primary: #E8E8F2;
  --color-text-secondary: #A0A0C0;
  --color-text-muted: #6060A0;
  --color-text-inverse: #050510;

  /* Cosmic palette - purples, cyans, gold */
  --color-accent-primary: #9D4EDD;
  --color-accent-secondary: #7B2CBF;
  --color-accent-hover: #C77DFF;
  --color-accent-tertiary: #00D4FF;
  --color-accent-gold: #FFD700;
  --color-star: #FFFAF0;

  --color-border: #252550;
  --color-border-strong: #9D4EDD;
  --color-border-glow: 0 0 20px rgba(157, 78, 221, 0.4);

  --color-success: #00D4FF;
  --color-warning: #FFD700;
  --color-error: #FF4466;

  /* Modern, clean space-age fonts - NOT Space Grotesk */
  --font-heading: 'Syne', 'Outfit', 'Urbanist', sans-serif;
  --font-body: 'Outfit', 'Nunito', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Soft, ethereal curves */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  /* Ethereal glow shadows */
  --shadow-sm: 0 0 15px rgba(157, 78, 221, 0.15);
  --shadow-md: 0 0 30px rgba(157, 78, 221, 0.2), 0 0 60px rgba(0, 212, 255, 0.1);
  --shadow-lg: 0 0 50px rgba(157, 78, 221, 0.3), 0 0 100px rgba(0, 212, 255, 0.15);
  --shadow-glow: 0 0 30px rgba(157, 78, 221, 0.5);

  /* Nebula gradient */
  --gradient-hero: linear-gradient(135deg, #9D4EDD 0%, #7B2CBF 40%, #00D4FF 100%);
  --gradient-nebula: radial-gradient(ellipse at 30% 20%, rgba(157, 78, 221, 0.2) 0%, transparent 50%),
                     radial-gradient(ellipse at 70% 80%, rgba(0, 212, 255, 0.15) 0%, transparent 50%);

  --header-bg: rgba(5, 5, 16, 0.95);
  --header-border: rgba(157, 78, 221, 0.3);
  --footer-bg: #050510;

  /* Starfield pattern */
  --bg-pattern: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='30' r='1' fill='white' fill-opacity='0.4'/%3E%3Ccircle cx='80' cy='10' r='0.5' fill='white' fill-opacity='0.6'/%3E%3Ccircle cx='150' cy='50' r='1.2' fill='white' fill-opacity='0.3'/%3E%3Ccircle cx='40' cy='90' r='0.8' fill='white' fill-opacity='0.5'/%3E%3Ccircle cx='180' cy='120' r='0.6' fill='white' fill-opacity='0.4'/%3E%3Ccircle cx='60' cy='150' r='1' fill='white' fill-opacity='0.35'/%3E%3Ccircle cx='120' cy='80' r='0.7' fill='white' fill-opacity='0.5'/%3E%3Ccircle cx='100' cy='180' r='1.1' fill='white' fill-opacity='0.3'/%3E%3Ccircle cx='170' cy='170' r='0.5' fill='white' fill-opacity='0.6'/%3E%3Ccircle cx='30' cy='190' r='0.8' fill='white' fill-opacity='0.4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   BASE STYLES - Force theme colors
   ========================================================================== */

/* Academic */
[data-theme="academic"] body {
  background-color: #FAF8F5 !important;
  color: #1C1917 !important;
  background-image: var(--bg-pattern);
}

/* Retro-Future */
[data-theme="retro-future"] body {
  background-color: #0D0D1A !important;
  color: #F0F0FF !important;
  background-image: var(--bg-pattern);
}

/* BD Lanturlu */
[data-theme="bd-lanturlu"] body {
  background-color: #FFF9E8 !important;
  color: #1A1A1A !important;
  background-image: var(--bg-pattern);
}

/* Cosmos */
[data-theme="cosmos"] body {
  background-color: #050510 !important;
  color: #E8E8F2 !important;
  background-image: var(--bg-pattern);
}

[data-theme="cosmos"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--gradient-nebula);
  pointer-events: none;
  z-index: -1;
}

/* ==========================================================================
   COMPONENT STYLES
   ========================================================================== */

/* Theme Card */
.theme-card {
  background: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-primary) !important;
  transition: all 0.25s ease;
}

.theme-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* BD Lanturlu special card style */
[data-theme="bd-lanturlu"] .theme-card {
  border: 3px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

[data-theme="bd-lanturlu"] .theme-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translate(-2px, -2px);
}

/* BD Lanturlu - improve heading readability */
[data-theme="bd-lanturlu"] .font-heading {
  letter-spacing: 0.02em;
  font-weight: 700;
}

/* Bangers only for hero/display text */
[data-theme="bd-lanturlu"] .font-display {
  font-family: 'Bangers', cursive;
  letter-spacing: 0.05em;
}

/* Retro-Future card glow */
[data-theme="retro-future"] .theme-card {
  border: 1px solid var(--color-border);
  background: var(--gradient-card) !important;
}

[data-theme="retro-future"] .theme-card:hover {
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-md);
}

/* Theme Button */
.theme-btn {
  background: var(--color-accent-primary) !important;
  color: var(--color-text-inverse) !important;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.theme-btn:hover {
  background: var(--color-accent-hover) !important;
  transform: translateY(-1px);
}

/* BD Lanturlu button */
[data-theme="bd-lanturlu"] .theme-btn {
  border: 3px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

[data-theme="bd-lanturlu"] .theme-btn:hover {
  box-shadow: var(--shadow-md);
  transform: translate(-2px, -2px);
}

/* Retro-Future button glow */
[data-theme="retro-future"] .theme-btn {
  box-shadow: var(--shadow-sm);
}

[data-theme="retro-future"] .theme-btn:hover {
  box-shadow: var(--shadow-md);
}

/* Theme Link */
.theme-link {
  color: var(--color-accent-primary) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.theme-link:hover {
  color: var(--color-accent-hover) !important;
  text-decoration: underline;
}

/* Retro-Future links glow on hover */
[data-theme="retro-future"] .theme-link:hover {
  text-shadow: 0 0 8px var(--color-accent-primary);
}

/* Theme Header */
.theme-header {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(10px);
}

/* Theme Footer */
.theme-footer {
  background: var(--footer-bg) !important;
  color: var(--color-text-inverse);
}

[data-theme="academic"] .theme-footer {
  color: var(--color-text-primary);
}

[data-theme="bd-lanturlu"] .theme-footer {
  color: var(--color-text-inverse);
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */

.font-heading {
  font-family: var(--font-heading) !important;
}

.font-body {
  font-family: var(--font-body) !important;
}

.font-mono {
  font-family: var(--font-mono) !important;
}

/* ==========================================================================
   SPECIAL EFFECTS
   ========================================================================== */

/* Retro-Future scanlines overlay */
[data-theme="retro-future"] .scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scanline);
  pointer-events: none;
  opacity: 0.5;
}

/* Retro-Future neon text */
[data-theme="retro-future"] .neon-text {
  text-shadow:
    0 0 5px var(--color-accent-primary),
    0 0 10px var(--color-accent-primary),
    0 0 20px var(--color-accent-primary);
}

/* Cosmos glow effect */
[data-theme="cosmos"] .glow {
  box-shadow: var(--shadow-glow);
}

/* BD Lanturlu pop effect */
[data-theme="bd-lanturlu"] .pop {
  transform: rotate(-1deg);
}

[data-theme="bd-lanturlu"] .pop:hover {
  transform: rotate(0deg) scale(1.02);
}