/* ==========================================================================
   DIVETIME.IT - THEME CONFIGURATION (Personalizzabile)
   Temi Light (predefinito) e Dark (Ocean Deep) con cambio logo dinamico.
   ========================================================================== */

/* Font Moderni e Smooth (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* --- TEMA CHIARO (PREDEFINITO) --- */
:root,
[data-theme="light"] {
  /* Palette Colori Light */
  --color-primary: #EF5A33;           /* Arancione primario brand Divetime */
  --color-primary-dark: #D4441F;      /* Variante scura per hover o bordi */
  --color-hover: #2575FC;             /* Blu elettrico attivo al passaggio del mouse */
  --color-hover-light: #5B95FD;       /* Tonalità blu chiaro per gradienti */
  --color-text-brand: #EF5A33;        /* Colore testo titoli e brand */
  --color-text-body: #333333;         /* Colore testo di lettura paragrafi */
  --color-text-muted: #555555;        /* Colore testo secondario */
  --color-white: #FFFFFF;             /* Bianco puro */
  
  /* Sfondi e gradienti Light */
  --color-bg-top: #E5E7EB;            /* Gradiente pagina: colore superiore chiaro e morbido */
  --color-bg-bottom: #D1D5DB;         /* Gradiente pagina: colore inferiore */
  --page-background: linear-gradient(180deg, var(--color-bg-top) 0%, var(--color-bg-bottom) 100%);
  
  --color-header-bg: #FFFFFF;         /* Sfondo bianco della barra logo */
  --color-wave-fill: #FFFFFF;         /* Colore onda decorativa */
  --color-submenu-bg: #FFFFFF;        /* Sfondo sottomenu desktop */
  --color-submenu-border: rgba(0, 0, 0, 0.08);
  --color-card-bg: #FFFFFF;           /* Sfondo card standard */
  --color-card-surface: #F9FAFB;      /* Sfondo uniforme card istruttori, album e pillole */
  --color-card-border: rgba(0, 0, 0, 0.06);

  --color-pill-bg: #F3F4F6;
  --color-pill-text: #374151;
  --color-pill-border: rgba(0, 0, 0, 0.08);
  
  /* Icone social */
  --color-social-icon: #EF5A33;
  --color-social-hover: #2575FC;

  /* Theme Toggle Button */
  --color-toggle-bg: #FFFFFF;
  --color-toggle-border: rgba(0, 0, 0, 0.12);
  --color-toggle-color: #EF5A33;
  --color-toggle-hover-bg: #F3F4F6;
  --color-toggle-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

  /* Ombre ed effetti smooth */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 12px 30px rgba(239, 90, 51, 0.16);

  /* Indicatori tema */
  --theme-sun-display: none;
  --theme-moon-display: flex;
}

/* --- TEMA SCURO (DARK OCEAN DEEP) --- */
[data-theme="dark"] {
  /* Palette Colori Dark */
  --color-primary: #FF693B;           /* Arancione brillante per contrasto elevato */
  --color-primary-dark: #EF5A33;
  --color-hover: #388BFD;             /* Blu vivace per dark mode */
  --color-hover-light: #6EB4FF;
  --color-text-brand: #FF693B;
  --color-text-body: #E2E8F0;         /* Testo chiaro di lettura ad alta leggibilità */
  --color-text-muted: #94A3B8;        /* Grigio ardesia per sottotitoli e dettagli */
  --color-white: #FFFFFF;
  
  /* Sfondi e gradienti Dark - Abisso oceanico */
  --color-bg-top: #061820;            /* Blu petrolio profondità */
  --color-bg-bottom: #0A222C;
  --page-background: linear-gradient(180deg, var(--color-bg-top) 0%, var(--color-bg-bottom) 100%);
  
  /* Header e Wave: fondono esattamente lo sfondo del logo dark #0A2733 */
  --color-header-bg: #0A2733;
  --color-wave-fill: #0A2733;
  --color-submenu-bg: #0E3140;
  --color-submenu-border: rgba(255, 255, 255, 0.12);
  --color-card-bg: #0E3140;
  --color-card-surface: #0E3140;      /* Sfondo card uniforme dark */
  --color-card-border: rgba(255, 255, 255, 0.08);

  --color-pill-bg: #153E50;
  --color-pill-text: #E2E8F0;
  --color-pill-border: rgba(255, 255, 255, 0.12);
  
  /* Icone social */
  --color-social-icon: #FF693B;
  --color-social-hover: #388BFD;

  /* Theme Toggle Button */
  --color-toggle-bg: #0E3140;
  --color-toggle-border: rgba(255, 255, 255, 0.18);
  --color-toggle-color: #FDBA74;
  --color-toggle-hover-bg: #153E50;
  --color-toggle-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);

  /* Ombre Dark */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 12px 30px rgba(255, 105, 59, 0.25);

  /* Indicatori tema */
  --theme-sun-display: flex;
  --theme-moon-display: none;
}

/* --- TIPOGRAFIA CONDIVISA (Outfit + Plus Jakarta Sans) --- */
:root {
  --font-brand: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --font-size-title: clamp(30px, 4vw, 42px);
  --font-size-nav: 18px;
  --font-size-card-title: 22px;
  --font-size-body: 16px;
  --font-size-footer: 16px;
  
  --font-weight-extrabold: 800;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* --- SPAZIATURE E DIMENSIONI --- */
  --container-max-width: 1400px;
  --container-content-width: 1200px;
  --nav-height: 72px;
  --logo-max-width: 280px;
  --logo-mobile-max-width: 210px;
  
  /* Raggi dei bordi */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-card: 20px;
  --radius-card-hover: 36px;
  --radius-pill: 999px;

  /* Transizioni */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}