/**
 * =============================================================================
 * 00-themes.css - Sistema de Temes
 * =============================================================================
 * Variables CSS per a temes alternables del dashboard de temperatura.
 * Aquest fitxer defineix els temes disponibles i les seves variables.
 *
 * @package    temperatura.viladrau.online
 * @author     Andreu Pujol <hola@andreupujol.dev>
 * @version    1.0.0
 * @created    2025-11-28
 * =============================================================================
 */

/* =============================================================================
   IMPORTACIÓ DE FONTS
   ============================================================================= */

/* Font Manrope (tema actual) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');

/* Font Comfortaa (tema Viladrau) */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

/* =============================================================================
   TEMA PER DEFECTE: ACTUAL (Blau/Verd Tech)
   ============================================================================= */

:root {
  /* ===== Colors Principals ===== */
  --color-primary: #0ea5e9;           /* Blau cel - Primari */
  --color-secondary: #16a34a;         /* Verd llima - Secundari */
  --color-accent: #f59e0b;            /* Groc ambre - Accent */
  --color-danger: #dc2626;            /* Vermell - Errors/Alertes */

  /* ===== Backgrounds ===== */
  --bg-main: #fdfdfc;                 /* Fons principal (quasi blanc) */
  --bg-card: #ffffff;                 /* Fons targetes (blanc pur) */
  --bg-gradient-start: #e0f2fe;       /* Gradient inici (blau clar) */
  --bg-gradient-mid: #dcfce7;         /* Gradient mig (verd clar) */
  --bg-gradient-end: #fef3c7;         /* Gradient final (groc clar) */

  /* ===== Text ===== */
  --text-primary: #0f172a;            /* Text principal (gris molt fosc) */
  --text-secondary: #64748b;          /* Text secundari (gris mitjà) */
  --text-muted: #94a3b8;              /* Text apagat (gris clar) */

  /* ===== Borders ===== */
  --border-color: rgba(226, 232, 240, 0.8);  /* Borders suaus */
  --border-color-hover: rgba(14, 165, 233, 0.3);  /* Borders hover */

  /* ===== Shadows ===== */
  --shadow-sm: 0 8px 16px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 14px 50px rgba(15, 23, 42, 0.25);
  --shadow-lg: 0 16px 60px rgba(15, 23, 42, 0.18);
  --shadow-xl: 0 10px 40px rgba(15, 23, 42, 0.3);
  --shadow-card: 0 16px 60px rgba(15, 23, 42, 0.18);

  /* ===== Colors Funcionals (Temperatura) ===== */
  --temp-hot: #ef4444;                /* Temperatura alta (vermell) */
  --temp-warm: #f59e0b;               /* Temperatura càlida (groc) */
  --temp-cool: #0ea5e9;               /* Temperatura fresca (blau) */
  --temp-cold: #3b82f6;               /* Temperatura freda (blau fosc) */

  /* ===== Colors Gràfics ===== */
  --chart-line-primary: #0ea5e9;      /* Línia principal gràfic */
  --chart-line-secondary: #16a34a;    /* Línia secundària gràfic */
  --chart-area-fill: rgba(14, 165, 233, 0.1);  /* Ompliment àrea */
  --chart-grid: rgba(148, 163, 184, 0.2);      /* Graella gràfic */

  /* ===== Predicció IA ===== */
  --ai-primary: #a855f7;              /* Violeta - Predicció IA */
  --ai-secondary: #c084fc;            /* Violeta clar - Accent IA */
  --ai-background: rgba(168, 85, 247, 0.05);  /* Fons IA */

  /* ===== Tonalitats de Gris ===== */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-900: #0f172a;

  /* ===== Tipografia ===== */
  --font-family-base: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ===== Espaiats ===== */
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 22px;

  /* ===== Border Radius ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ===== Transicions ===== */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* =============================================================================
   TEMA CORPORATIU: VILADRAU (Verd Natural)
   ============================================================================= */

:root[data-theme="viladrau"] {
  /* ===== Colors Principals ===== */
  --color-primary: #2d5a3d;           /* Verd bosc - Principal marca */
  --color-secondary: #4a7c59;         /* Verd molsa - Secundari */
  --color-accent: #87a96b;            /* Verd sàlvia - Accent */
  --color-danger: #dc2626;            /* Vermell - Mantenir estàndard */

  /* ===== Backgrounds ===== */
  --bg-main: #f5f1e8;                 /* Beix natural corporatiu */
  --bg-card: #ffffff;                 /* Blanc pur (contrast) */
  --bg-gradient-start: #e8f4ed;       /* Gradient inici (verd molt clar) */
  --bg-gradient-mid: #f5f1e8;         /* Gradient mig (beix) */
  --bg-gradient-end: #e8f4ed;         /* Gradient final (verd molt clar) */

  /* ===== Text ===== */
  --text-primary: #1a1a1a;            /* Gris fosc corporatiu */
  --text-secondary: #666666;          /* Gris mitjà corporatiu */
  --text-muted: #999999;              /* Gris clar */

  /* ===== Borders ===== */
  --border-color: rgba(45, 90, 61, 0.15);      /* Borders amb tint verd */
  --border-color-hover: rgba(45, 90, 61, 0.3); /* Borders hover */

  /* ===== Shadows (amb tint verd) ===== */
  --shadow-sm: 0 2px 10px rgba(45, 90, 61, 0.08);
  --shadow-md: 0 8px 25px rgba(45, 90, 61, 0.12);
  --shadow-lg: 0 15px 35px rgba(45, 90, 61, 0.15);
  --shadow-xl: 0 20px 40px rgba(45, 90, 61, 0.2);
  --shadow-card: 0 8px 25px rgba(45, 90, 61, 0.12);

  /* ===== Colors Funcionals (Temperatura) ===== */
  --temp-hot: #e67e22;                /* Taronja terra (CTA corporatiu) */
  --temp-warm: #f39c12;               /* Taronja càlid */
  --temp-cool: #3498db;               /* Blau tech corporatiu */
  --temp-cold: #2980b9;               /* Blau tech fosc */

  /* ===== Colors Gràfics ===== */
  --chart-line-primary: #4a7c59;      /* Verd secundari */
  --chart-line-secondary: #87a96b;    /* Verd sàlvia */
  --chart-area-fill: rgba(74, 124, 89, 0.1);   /* Verd transparent */
  --chart-grid: rgba(45, 90, 61, 0.1);         /* Graella verd suau */

  /* ===== Predicció IA ===== */
  --ai-primary: #2980b9;              /* Blau tech fosc */
  --ai-secondary: #3498db;            /* Blau tech */
  --ai-background: rgba(52, 152, 219, 0.05);   /* Fons blau suau */

  /* ===== Tonalitats de Gris (adaptades) ===== */
  --color-slate-50: #f8f9fa;
  --color-slate-100: #f5f1e8;         /* Beix corporatiu */
  --color-slate-200: #e8e4db;
  --color-slate-300: #d4cfc4;
  --color-slate-400: #999999;
  --color-slate-500: #666666;
  --color-slate-600: #4a4a4a;
  --color-slate-900: #1a1a1a;

  /* ===== Tipografia ===== */
  --font-family-base: "Comfortaa", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 500;
  --font-weight-bold: 600;
  --font-weight-extrabold: 700;

  /* ===== Border Radius (més arrodonit) ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;                  /* Més arrodonit (corporatiu) */
  --radius-full: 9999px;

  /* ===== Transicions (mantenir) ===== */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* =============================================================================
   TEMA FOSC: PREPARACIÓ FUTURA
   ============================================================================= */

:root[data-theme="dark"] {
  /* TODO: Implementar en futur */
  /* Estructura preparada per afegir mode fosc */
  
  /* Exemple d'estructura:
  --color-primary: #3b82f6;
  --bg-main: #0f172a;
  --bg-card: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  */
}

/* =============================================================================
   SELECTOR DE TEMA - UI Component
   ============================================================================= */

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.theme-switcher {
  display: flex;
  gap: 6px;
  background: var(--bg-card);
  padding: 6px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: var(--transition-medium);
}

.theme-switcher:hover {
  box-shadow: var(--shadow-md);
}

.theme-btn {
  padding: 6px 12px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-main);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-base);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.theme-btn:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.theme-btn:active {
  transform: translateY(0);
}

.theme-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.theme-btn.active:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Responsive: Ocultar text en mòbil, només emojis */
@media (max-width: 768px) {
  .header-controls {
    width: 100%;
    justify-content: space-between;
  }

  .theme-switcher {
    padding: 4px;
    gap: 4px;
  }

  .theme-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
  }

  .theme-btn span {
    display: none; /* Ocultar text, mantenir emoji */
  }
}

/* =============================================================================
   TRANSICIONS DE TEMA
   ============================================================================= */

/* Transició suau quan canvia el tema */
:root {
  transition: 
    background-color var(--transition-medium),
    color var(--transition-medium);
}

/* Transició suau per tots els elements que usen variables */
* {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: var(--transition-medium);
  transition-timing-function: ease;
}

/* Excepcions: No aplicar transició a animacions existents */
.loading-spinner,
.pulse-animation,
[class*="animate-"],
[class*="transition-"] {
  transition: none !important;
}

/* =============================================================================
   NOTES D'ÚS
   ============================================================================= */

/*
 * Com canviar de tema:
 * 
 * 1. JavaScript:
 *    document.documentElement.setAttribute('data-theme', 'viladrau');
 *    document.documentElement.removeAttribute('data-theme'); // Tornar a default
 * 
 * 2. Guardar preferència:
 *    localStorage.setItem('dashboard-theme', 'viladrau');
 * 
 * 3. Carregar preferència:
 *    const theme = localStorage.getItem('dashboard-theme') || 'default';
 *    if (theme !== 'default') {
 *      document.documentElement.setAttribute('data-theme', theme);
 *    }
 * 
 * 4. Temes disponibles:
 *    - 'default' (sense atribut data-theme)
 *    - 'viladrau' (data-theme="viladrau")
 *    - 'dark' (futur - data-theme="dark")
 */