/**
 * COEUS Design System V2 - Complete Theme System
 *
 * PURPOSE:
 * Unified theme system supporting 5 complete themes
 * Each theme includes colors, glass effects, and backgrounds
 *
 * THEMES:
 * 1. Light - Charcoal Blue on mint-pink gradient
 * 2. Light Modern - Slate on clean white gradient
 * 3. Dark - Warm Cream on dark gradient
 * 4. Dark Art - Warm White on artistic dark
 * 5. Dark Modern - Cool White on urban dark
 *
 * IMPROVEMENTS:
 * - All 5 themes fully defined
 * - Consistent variable structure
 * - Enhanced contrast ratios
 * - Optimized glass effects
 */

/* ============================================ */
/*           THEME VARIABLE STRUCTURE           */
/* ============================================ */
/* Each theme defines these variables:
 * Text Colors:
 * - --text-primary (95% opacity)
 * - --text-secondary (75-85% opacity)
 * - --text-tertiary (55-65% opacity)
 *
 * Glass Effects:
 * - --glass-primary (12-14% opacity)
 * - --glass-secondary (15-16% opacity)
 * - --glass-hover (20-24% opacity)
 * - --glass-border (15-20% opacity)
 *
 * Backgrounds:
 * - --background-primary
 * - --background-secondary
 * - --background-hover
 */

/* ============================================ */
/*              BASE SETUP                      */
/* ============================================ */

/* Prevent overscroll bounce */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overscroll-behavior: none;
}

/* Background layer setup */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================ */
/*          THEME 1: LIGHT (DEFAULT)           */
/* ============================================ */
[data-theme="light"] {
  /* Charcoal Blue Text Colors */
  --text-primary: rgba(44, 62, 80, 0.95);
  --text-secondary: rgba(44, 62, 80, 0.75);
  --text-tertiary: rgba(44, 62, 80, 0.55);

  /* Glass Effects - Dark tint on light */
  --glass-primary: rgba(44, 62, 80, 0.12);
  --glass-secondary: rgba(44, 62, 80, 0.16);
  --glass-hover: rgba(44, 62, 80, 0.22);
  --glass-border: rgba(44, 62, 80, 0.15);
  --glass-border-hover: rgba(44, 62, 80, 0.3);

  /* Glass RGB values for new system */
  --theme-glass-rgb: 255, 255, 255;  /* White glass */

  /* Solid Backgrounds */
  --background-primary: #ffffff;
  --background-secondary: #f9fafb;
  --background-hover: #f3f4f6;

  /* Borders */
  --border-color: #e5e7eb;
  --border-hover: #9ca3af;

  /* Accent Colors */
  --accent-primary: #007AFF;
  --accent-success: #34C759;
  --accent-warning: #FF9500;
  --accent-danger: #FF3B30;

  /* Accent RGB values for glass buttons */
  --accent-primary-rgb: 0, 122, 255;
  --accent-success-rgb: 52, 199, 89;
  --accent-warning-rgb: 255, 149, 0;
  --accent-danger-rgb: 255, 59, 48;
}

[data-theme="light"] body::before,
body[data-theme="light"]::before {
  background-image: url('/assets/light.jpg');
}

/* ============================================ */
/*        THEME 2: LIGHT MODERN (NEW)          */
/* ============================================ */
[data-theme="lightmodern"] {
  /* Slate Text Colors - More modern feel */
  --text-primary: rgba(31, 41, 55, 0.95);
  --text-secondary: rgba(31, 41, 55, 0.75);
  --text-tertiary: rgba(31, 41, 55, 0.55);

  /* Glass Effects - Subtle slate tint */
  --glass-primary: rgba(31, 41, 55, 0.10);
  --glass-secondary: rgba(31, 41, 55, 0.14);
  --glass-hover: rgba(31, 41, 55, 0.20);
  --glass-border: rgba(31, 41, 55, 0.12);
  --glass-border-hover: rgba(31, 41, 55, 0.25);

  /* Glass RGB values for new system */
  --theme-glass-rgb: 255, 255, 255;  /* White glass */

  /* Clean White Backgrounds */
  --background-primary: #ffffff;
  --background-secondary: #fafbfc;
  --background-hover: #f4f5f7;

  /* Subtle Borders */
  --border-color: #e1e4e8;
  --border-hover: #959da5;

  /* Modern Accent Colors */
  --accent-primary: #0969da;
  --accent-success: #1f883d;
  --accent-warning: #fb8500;
  --accent-danger: #d1242f;

  /* Accent RGB values for glass buttons */
  --accent-primary-rgb: 9, 105, 218;
  --accent-success-rgb: 31, 136, 61;
  --accent-warning-rgb: 251, 133, 0;
  --accent-danger-rgb: 209, 36, 47;
}

[data-theme="lightmodern"] body::before,
body[data-theme="lightmodern"]::before {
  background-image: url('/assets/lightmodern.jpg');
}

/* ============================================ */
/*            THEME 3: DARK (DEFAULT)          */
/* ============================================ */
[data-theme="dark"] {
  /* Warm Cream Text Colors */
  --text-primary: rgba(245, 241, 232, 0.95);
  --text-secondary: rgba(245, 241, 232, 0.85);
  --text-tertiary: rgba(245, 241, 232, 0.65);

  /* Glass Effects - Light tint on dark */
  --glass-primary: rgba(245, 241, 232, 0.12);
  --glass-secondary: rgba(245, 241, 232, 0.15);
  --glass-hover: rgba(245, 241, 232, 0.22);
  --glass-border: rgba(245, 241, 232, 0.20);
  --glass-border-hover: rgba(245, 241, 232, 0.35);

  /* Glass RGB values for new system */
  --theme-glass-rgb: 0, 0, 0;  /* Black glass */

  /* Dark Backgrounds */
  --background-primary: rgba(30, 30, 35, 0.85);
  --background-secondary: rgba(20, 20, 25, 0.75);
  --background-hover: rgba(50, 50, 55, 0.85);

  /* Light Borders */
  --border-color: rgba(255, 255, 255, 0.15);
  --border-hover: rgba(255, 255, 255, 0.25);

  /* Accent Colors (adjusted for dark) */
  --accent-primary: #0A84FF;
  --accent-success: #30D158;
  --accent-warning: #FF9F0A;
  --accent-danger: #FF453A;

  /* Accent RGB values for glass buttons */
  --accent-primary-rgb: 10, 132, 255;
  --accent-success-rgb: 48, 209, 88;
  --accent-warning-rgb: 255, 159, 10;
  --accent-danger-rgb: 255, 69, 58;
}

[data-theme="dark"] body::before,
body[data-theme="dark"]::before {
  background-image: url('/assets/dark.jpg');
  background-position: center center;
}

/* ============================================ */
/*          THEME 4: DARK ART (NEW)            */
/* ============================================ */
[data-theme="darkart"] {
  /* Warm White Text - Artistic feel */
  --text-primary: rgba(250, 245, 239, 0.95);
  --text-secondary: rgba(250, 245, 239, 0.85);
  --text-tertiary: rgba(250, 245, 239, 0.65);

  /* Glass Effects - Warmer tint */
  --glass-primary: rgba(250, 245, 239, 0.14);
  --glass-secondary: rgba(250, 245, 239, 0.18);
  --glass-hover: rgba(250, 245, 239, 0.24);
  --glass-border: rgba(250, 245, 239, 0.22);
  --glass-border-hover: rgba(250, 245, 239, 0.38);

  /* Glass RGB values for new system */
  --theme-glass-rgb: 20, 20, 30;  /* Purple-tinted dark glass */

  /* Rich Dark Backgrounds */
  --background-primary: rgba(25, 25, 30, 0.88);
  --background-secondary: rgba(18, 18, 22, 0.78);
  --background-hover: rgba(45, 45, 50, 0.88);

  /* Warm Borders */
  --border-color: rgba(250, 245, 239, 0.18);
  --border-hover: rgba(250, 245, 239, 0.28);

  /* Artistic Accent Colors */
  --accent-primary: #4A9EFF;
  --accent-success: #4ADE80;
  --accent-warning: #FBBF24;
  --accent-danger: #F87171;

  /* Accent RGB values for glass buttons */
  --accent-primary-rgb: 74, 158, 255;
  --accent-success-rgb: 74, 222, 128;
  --accent-warning-rgb: 251, 191, 36;
  --accent-danger-rgb: 248, 113, 113;
}

[data-theme="darkart"] body::before,
body[data-theme="darkart"]::before {
  background-image: url('/assets/darkart.jpg');
  background-position: center center;
}

/* ============================================ */
/*        THEME 5: DARK MODERN (NEW)           */
/* ============================================ */
[data-theme="darkmodern"] {
  /* Cool White Text - Urban feel */
  --text-primary: rgba(248, 250, 252, 0.95);
  --text-secondary: rgba(248, 250, 252, 0.85);
  --text-tertiary: rgba(248, 250, 252, 0.65);

  /* Glass Effects - Darker containers, subtle hover */
  --glass-primary: rgba(15, 20, 30, 0.65);
  --glass-secondary: rgba(20, 25, 35, 0.70);
  --glass-hover: rgba(25, 30, 40, 0.72);
  --glass-border: rgba(248, 250, 252, 0.12);
  --glass-border-hover: rgba(248, 250, 252, 0.18);

  /* Glass RGB values for new system */
  --theme-glass-rgb: 15, 20, 30;  /* Dark blue-tinted glass */

  /* Modern Dark Backgrounds */
  --background-primary: rgba(12, 16, 28, 0.92);
  --background-secondary: rgba(8, 12, 22, 0.88);
  --background-hover: rgba(18, 24, 38, 0.90);

  /* Cool Borders */
  --border-color: rgba(248, 250, 252, 0.12);
  --border-hover: rgba(248, 250, 252, 0.22);

  /* Tech Accent Colors */
  --accent-primary: #3B82F6;
  --accent-success: #10B981;
  --accent-warning: #F59E0B;
  --accent-danger: #EF4444;

  /* Accent RGB values for glass buttons */
  --accent-primary-rgb: 59, 130, 246;
  --accent-success-rgb: 16, 185, 129;
  --accent-warning-rgb: 245, 158, 11;
  --accent-danger-rgb: 239, 68, 68;
}

[data-theme="darkmodern"] body::before,
body[data-theme="darkmodern"]::before {
  background-image: url('/assets/darkmodern.jpg');
  background-position: center center;
}

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

/* Glass Cards - Theme-aware */
.glass-card,
.coeus-box {
  background: var(--glass-primary);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover,
.coeus-box:hover {
  background: var(--glass-hover);
  border-color: var(--glass-border-hover);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* Glass Buttons - Theme-aware */
.glass-button,
.glass-button-thin {
  background: var(--glass-secondary);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
  color: var(--text-primary);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

.glass-button:hover,
.glass-button-thin:hover {
  background: var(--glass-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.15);
}

.glass-button:active,
.glass-button-thin:active {
  transform: translateY(0);
}

/* Glass Containers - Theme-aware */
.glass-container {
  background: var(--glass-primary);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
}

.glass-container-thin {
  background: var(--glass-secondary);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
}

/* ============================================ */
/*              THEME TRANSITIONS               */
/* ============================================ */

/* Smooth theme switching */
* {
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease;
}

/* Prevent transition on page load */
body.no-transition * {
  transition: none !important;
}

/* ============================================ */
/*           THEME UTILITY CLASSES              */
/* ============================================ */

/* Force text colors */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }

/* Force backgrounds */
.bg-primary { background: var(--background-primary) !important; }
.bg-secondary { background: var(--background-secondary) !important; }
.bg-hover { background: var(--background-hover) !important; }

/* Force glass effects */
.glass-primary { background: var(--glass-primary) !important; }
.glass-secondary { background: var(--glass-secondary) !important; }
.glass-hover { background: var(--glass-hover) !important; }

/* ============================================ */
/*              THEME INDICATORS                */
/* ============================================ */

/* Optional theme indicator for debugging */
body[data-theme]::after {
  content: attr(data-theme);
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: var(--glass-primary);
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Show indicator on hover (dev only) */
body[data-theme].debug-theme::after {
  opacity: 0.7;
}

/**
 * THEME USAGE:
 *
 * Set theme via data attribute:
 * <body data-theme="light">
 * <body data-theme="lightmodern">
 * <body data-theme="dark">
 * <body data-theme="darkart">
 * <body data-theme="darkmodern">
 *
 * JavaScript theme switching:
 * document.body.setAttribute('data-theme', 'darkmodern');
 *
 * Store preference:
 * localStorage.setItem('theme', 'darkart');
 */