/* DaisyUI Theme Bridge */
/* Maps DaisyUI theme variables to custom CSS variables */
/* Load order: DaisyUI CDN → theme-bridge.css → variables.css → profile.css */
/* This allows all 29 DaisyUI themes to work with existing custom variable system */

:root,
[data-theme] {
  /* ========== Background Colors ========== */
  /* DaisyUI provides raw OKLCH values (L C H) - wrap them in oklch() */
  --bg: oklch(var(--b1));           /* base-100: Main background */
  --bg1: oklch(var(--b3));          /* base-300: Elevated background (more contrast) */
  --bg2: oklch(var(--b2));          /* base-200: Less elevated */
  
  /* ========== Primary Colors ========== */
  /* DaisyUI primary color maps to accent */
  --accent: oklch(var(--p));        /* primary: Main accent color */
  --accent-hover: oklch(var(--pf)); /* primary-focus: Hover state */
  
  /* ========== Text Colors ========== */
  /* DaisyUI content colors map to text */
  --text: oklch(var(--bc));         /* base-content: Main text */
  --text-primary: oklch(var(--bc)); /* base-content: Primary text */
  --text-secondary: color-mix(in oklch, var(--bc) 80%, transparent); /* base-content: Secondary text */
  --muted: color-mix(in oklch, var(--bc) 60%, transparent);  /* base-content: Muted text */
  
  /* ========== Card & Surface Colors ========== */
  /* Modern approach: Cards are LIGHTER than background, not darker */
  --card: oklch(var(--b2));         /* base-200: Elevated surface (lighter) */
  --card-hover: oklch(var(--b1));   /* base-100: Even lighter on hover */
  
  /* ========== Glass Effects ========== */
  /* Modern glassmorphism with subtle borders and elevation */
  --glass: color-mix(in oklch, oklch(var(--b2)) 70%, transparent);  /* Semi-transparent elevated surface */
  --glass-bg: oklch(var(--b2));     /* Solid fallback for glass backgrounds */
  --glass-border: color-mix(in oklch, oklch(var(--bc)) 12%, transparent); /* Subtle border */
  --glass-hover: color-mix(in oklch, oklch(var(--b1)) 80%, transparent);  /* Lighter on hover */
  
  /* ========== Accent Border (for focus/active states) ========== */
  --accent-border: color-mix(in oklch, oklch(var(--p)) 30%, transparent);
  
  /* ========== Modern Shadows (subtle, not heavy) ========== */
  --card-shadow: 0 1px 3px color-mix(in oklch, oklch(var(--b1)) 8%, transparent),
                 0 1px 2px color-mix(in oklch, oklch(var(--b1)) 6%, transparent);
  --card-shadow-hover: 0 4px 6px color-mix(in oklch, oklch(var(--b1)) 10%, transparent),
                       0 2px 4px color-mix(in oklch, oklch(var(--b1)) 8%, transparent);
  --card-shadow-lg: 0 10px 15px color-mix(in oklch, oklch(var(--b1)) 12%, transparent),
                    0 4px 6px color-mix(in oklch, oklch(var(--b1)) 8%, transparent);
  
  /* ========== Semantic Colors ========== */
  /* DaisyUI semantic colors */
  --success: oklch(var(--su));      /* success */
  --warning: oklch(var(--wa));      /* warning */
  --error: oklch(var(--er));        /* error */
  --info: oklch(var(--in));         /* info */
  
  /* ========== Status Colors ========== */
  /* Map semantic colors to status variants */
  --watching: oklch(var(--p));      /* primary for watching */
  --completed: oklch(var(--su));    /* success for completed */
  --planning: oklch(var(--in));     /* info for planning */
  --dropped: oklch(var(--er));      /* error for dropped */
  --paused: oklch(var(--wa));       /* warning for paused */
  
  /* ========== Interaction States ========== */
  --hover-bg: oklch(var(--b2));     /* base-200: Hover background */
  --active-bg: color-mix(in oklch, oklch(var(--b3)) 80%, transparent); /* base-300: Active state */
  
  /* ========== Borders & Dividers ========== */
  --border: color-mix(in oklch, oklch(var(--bc)) 20%, transparent);
  --divider: color-mix(in oklch, oklch(var(--bc)) 10%, transparent);
  
  /* ========== Shadows ========== */
  /* Preserve custom shadow but make it theme-aware */
  --shadow: 0 20px 50px color-mix(in oklch, oklch(var(--b1)) 40%, transparent);
  --shadow-sm: 0 2px 8px color-mix(in oklch, oklch(var(--b1)) 10%, transparent);
  --shadow-lg: 0 30px 60px color-mix(in oklch, oklch(var(--b1)) 50%, transparent);
  
  /* ========== Special Effects ========== */
  /* Accent with opacity for glows */
  --accent-glow: color-mix(in oklch, oklch(var(--p)) 10%, transparent);
  --accent-glow-strong: color-mix(in oklch, oklch(var(--p)) 20%, transparent);
  
  /* ========== Gradients ========== */
  /* Theme-aware gradients using DaisyUI colors */
  --gradient-primary: linear-gradient(135deg, oklch(var(--p)), oklch(var(--s)));
  --gradient-accent: linear-gradient(135deg, oklch(var(--a)), oklch(var(--p)));
}

/* ========== Theme-Specific Overrides ========== */
/* REMOVED - Let DaisyUI handle all theme-specific styling */
/* Each DaisyUI theme has its own perfectly balanced colors */
/* No overrides needed - trust the theme! */

/* ========== Preserve Existing Overrides ========== */
/* Any theme-specific customizations from variables.css will still apply */
/* The cascade order ensures variables.css can override these mappings */

/* ========== Theme Selector UI Styles ========== */
/* Styles for the theme selection modal buttons */

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

/* Theme option button styling */
.theme-option-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--card);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text);
}

.theme-option-btn:hover {
    background: var(--card-hover);
    transform: translateY(-2px);
}

.theme-option-btn.active-theme {
    border-color: var(--accent);
    background: var(--accent-glow);
    box-shadow: 0 0 20px var(--accent-glow);
}

.theme-preview {
    width: 100%;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--glass-border);
}