/* website/static/css/base/themes.css */

/* ------------------------------------------------------------
   GLOBAL THEME SYSTEM (Unified + Variable-Driven + Luxury)
   website/static/css/base/themes.css
------------------------------------------------------------
   PURPOSE:
   This file defines ALL theme overrides for the application.
   Each theme updates:
   ✓ Text colors
   ✓ Backgrounds
   ✓ Header colors
   ✓ Button colors
   ✓ Glass system variables
   ✓ Section + content backgrounds
   ✓ Optional theme-specific visual layers (snow, overlays)

   IMPORTANT:
   - No component-specific styling here.
   - Only variable overrides + theme backgrounds.
------------------------------------------------------------ */


/* ============================================================
   🌑 DARK THEME
============================================================ */
body.theme-dark {
  --color-bg: #000000;
  --color-text: #c0c0c0;
  --color-header: #ff7f00;
  --color-button-text: #ff7f00;

  --color-primary:   #ff7f00;
  --color-secondary: #ff9966;
  --color-accent:    #ffa07a;

  /* Glass system */
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.18);
  --glass-text: #e6e6e6;

  --glass-elevated-bg: rgba(20,20,30,0.85);
  --glass-transparent-bg: rgba(255,255,255,0.04);

  /* Layout */
  --section-bg: rgba(255,255,255,0.04);
  --content-bg: transparent;

  background: var(--color-bg);
  color: var(--color-text);
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6 {
  color: var(--color-header);
}

body.theme-dark .btn {
  color: var(--color-button-text);
  border-color: var(--color-button-text);
}



/* ============================================================
   ☀️ LIGHT THEME
============================================================ */
body.theme-light {
  --color-bg: #c0c0c0;
  --color-text: #000000;
  --color-header: #007bff;
  --color-button-text: #007bff;

  --color-primary:   #007bff;
  --color-secondary: #3399ff;
  --color-accent:    #66ccff;

  /* Glass system */
  --glass-bg: rgba(0,0,0,0.06);
  --glass-border: rgba(0,0,0,0.18);
  --glass-text: #000;

  --glass-elevated-bg: rgba(255,255,255,0.85);
  --glass-transparent-bg: rgba(0,0,0,0.05);

  /* Layout */
  --section-bg: rgba(0,0,0,0.05);
  --content-bg: rgba(255,255,255,0.4);

  background: var(--color-bg);
  color: var(--color-text);
}

body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6 {
  color: var(--color-header);
}

body.theme-light .btn {
  color: var(--color-button-text);
  border-color: var(--color-button-text);
}



/* ============================================================
   🍈 MELON THEME
============================================================ */
body.theme-melon {
  --color-bg: #88deb0;
  --color-text: #2c2c2c;
  --color-header: #ff6f61;
  --color-button-text: #ff9a76;

  --color-primary:   #ff9a76;
  --color-secondary: #ffb6b9;
  --color-accent:    #fae3d9;

  /* Glass system */
  --glass-bg: rgba(255,255,255,0.20);
  --glass-border: rgba(255,255,255,0.35);
  --glass-text: #2c2c2c;

  --glass-elevated-bg: rgba(255,255,255,0.75);
  --glass-transparent-bg: rgba(255,255,255,0.15);

  /* Layout */
  --section-bg: rgba(255,255,255,0.25);
  --content-bg: rgba(255,255,255,0.35);

  background: var(--color-bg);
  color: var(--color-text);
}

body.theme-melon h1,
body.theme-melon h2,
body.theme-melon h3,
body.theme-melon h4,
body.theme-melon h5,
body.theme-melon h6 {
  color: var(--color-header);
}

body.theme-melon .btn {
  color: var(--color-button-text);
  border-color: var(--color-button-text);
}



/* ============================================================
   ❄️ WINTER DARK THEME
============================================================ */
body.theme-winter-dark {
  --color-text: #f0f0f0;

  /* Glass */
  --glass-bg: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.25);
  --glass-text: #ffffff;

  --glass-elevated-bg: rgba(20,20,30,0.85);
  --glass-transparent-bg: rgba(255,255,255,0.08);

  /* Layout */
  --section-bg: rgba(255,255,255,0.10);
  --content-bg: rgba(255,255,255,0.05);

  background: linear-gradient(to bottom, #0a0a0f, #1a1a2e);
  overflow: hidden;
  color: var(--color-text);
}



/* ============================================================
   ⛄ WINTER LIGHT THEME
============================================================ */
body.theme-winter-light {
  --color-text: #000000;
  --color-header: #0055aa;
  --color-button-text: #0055aa;

  --color-primary:   #0055aa;
  --color-secondary: #3399ff;
  --color-accent:    #66ccff;

  /* Glass */
  --glass-bg: rgba(255,255,255,0.40);
  --glass-border: rgba(255,255,255,0.55);
  --glass-text: #000;

  --glass-elevated-bg: rgba(255,255,255,0.75);
  --glass-transparent-bg: rgba(255,255,255,0.25);

  /* Layout */
  --section-bg: rgba(255,255,255,0.45);
  --content-bg: rgba(255,255,255,0.35);

  background: url("/static/uploads/images/smart-snowman.png") no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
  color: var(--color-text);
  position: relative;
}

/* Frosted shimmer overlay */
body.theme-winter-light::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background: linear-gradient(
    rgba(255,255,255,0.6),
    rgba(255,255,255,0.3),
    rgba(255,255,255,0.6)
  );
  background-size: 200% 200%;
  animation: shimmerOverlay 12s linear infinite;
}

@keyframes shimmerOverlay {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

body.theme-winter-light h1,
body.theme-winter-light h2,
body.theme-winter-light h3,
body.theme-winter-light h4,
body.theme-winter-light h5,
body.theme-winter-light h6 {
  color: var(--color-header);
}

body.theme-winter-light .btn {
  color: var(--color-button-text);
  border-color: var(--color-button-text);
}



/* ============================================================
   ❄️ SNOWFLAKE PARTICLE SYSTEM
============================================================ */
.snowflake {
  position: fixed;
  top: -10px;
  pointer-events: none;
  z-index: 9999;

  color: #ffffff;
  opacity: 0;
  will-change: transform, opacity;

  animation-name: fall, drift;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* Vertical fall */
@keyframes fall {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.9; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Gentle horizontal drift */
@keyframes drift {
  0%   { margin-left: 0; }
  50%  { margin-left: 12px; }
  100% { margin-left: 0; }
}