/* ==========================================================================
   theme.css — Variables de thème pour n0ctuait.fr
   Chargé EN PREMIER, avant tous les autres CSS.
   Gère automatiquement le mode sombre (défaut) et clair via prefers-color-scheme.
   ========================================================================== */

/* ====== MODE SOMBRE (défaut) ====== */
:root {
  --bg-body:        #0b0d12;
  --bg-header:      #0d0d0f;
  --bg-chip:        #121520;
  --bg-card:        #1a1d26;
  --bg-dropdown:    #1a1a1f;

  --border-main:    #202638;
  --border-subtle:  #2a2d36;
  --border-header:  #1f2937; /* gray-800 equiv */

  --text-primary:   #e8eaef;
  --text-secondary: #c8cad0;
  --text-muted:     #9a9da6;
  --text-faint:     #6b7280; /* gray-500 equiv */

  --accent-orange:  #FF7E4E;
  --accent-red:     #e9383f;
  --accent-gold:    #f5a623;
  --accent-green:   #4CAF50;
  --accent-purple:  #7c3aed;
  --accent-nav:     #8345b5;

  --btn-primary-bg: #e45432;
  --btn-primary-hover: brightness(1.15);

  --shadow-card:    0 0 25px rgba(131, 69, 181, 0.35);
  --shadow-dropdown: 0 4px 15px rgba(0, 0, 0, 0.4);

  --code-bg:        rgba(255, 126, 78, 0.1);
  --tag-wifi-bg:    rgba(255, 126, 78, 0.15);
  --tag-secu-bg:    rgba(233, 56, 63, 0.15);
  --tag-lan-bg:     rgba(245, 166, 35, 0.15);
  --tag-green-bg:   rgba(76, 175, 80, 0.15);
  --tag-purple-bg:  rgba(124, 58, 237, 0.1);

  --filter-bg:      #1a1d26;
  --filter-border:  #2a2d36;
  --filter-active-bg: rgba(255, 126, 78, 0.08);

  --callout-bg:     #1a1d26;
  --callout-border: #2a2d36;

  --table-header-bg: #1a1d26;
  --table-row-hover: rgba(255, 255, 255, 0.02);

  --timeline-line:  #2a2d36;
  --timeline-dot-border: #0f1117;

  --comparison-bg:  #1a1d26;
  --comparison-border: #2a2d36;

  --cta-gradient:   linear-gradient(135deg, rgba(233,56,63,0.12), rgba(255,126,78,0.08));
  --cta-border:     rgba(233,56,63,0.3);
  --cta-purple-gradient: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(0,206,209,0.08));
  --cta-purple-border:   rgba(124,58,237,0.3);

  --reading-time-bg: rgba(154, 157, 166, 0.1);

  color-scheme: dark;
}

/* ====== MODE CLAIR ====== */
@media (prefers-color-scheme: light) {
  :root {
    --bg-body:        #f5f6f8;
    --bg-header:      #ffffff;
    --bg-chip:        #ffffff;
    --bg-card:        #ffffff;
    --bg-dropdown:    #ffffff;

    --border-main:    #e2e4e9;
    --border-subtle:  #d1d5db;
    --border-header:  #e5e7eb;

    --text-primary:   #111827;
    --text-secondary: #374151;
    --text-muted:     #6b7280;
    --text-faint:     #9ca3af;

    --accent-orange:  #e45432;
    --accent-red:     #dc2626;
    --accent-gold:    #d97706;
    --accent-green:   #16a34a;
    --accent-purple:  #7c3aed;
    --accent-nav:     #6d28d9;

    --btn-primary-bg: #e45432;
    --btn-primary-hover: brightness(0.9);

    --shadow-card:    0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.1);

    --code-bg:        rgba(229, 84, 50, 0.08);
    --tag-wifi-bg:    rgba(228, 84, 50, 0.1);
    --tag-secu-bg:    rgba(220, 38, 38, 0.1);
    --tag-lan-bg:     rgba(217, 119, 6, 0.1);
    --tag-green-bg:   rgba(22, 163, 74, 0.1);
    --tag-purple-bg:  rgba(124, 58, 237, 0.08);

    --filter-bg:      #ffffff;
    --filter-border:  #d1d5db;
    --filter-active-bg: rgba(228, 84, 50, 0.08);

    --callout-bg:     #f9fafb;
    --callout-border: #e2e4e9;

    --table-header-bg: #f3f4f6;
    --table-row-hover: rgba(0, 0, 0, 0.02);

    --timeline-line:  #d1d5db;
    --timeline-dot-border: #f5f6f8;

    --comparison-bg:  #ffffff;
    --comparison-border: #e2e4e9;

    --cta-gradient:   linear-gradient(135deg, rgba(228,84,50,0.06), rgba(255,126,78,0.04));
    --cta-border:     rgba(228,84,50,0.2);
    --cta-purple-gradient: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(0,206,209,0.04));
    --cta-purple-border:   rgba(124,58,237,0.2);

    --reading-time-bg: rgba(107, 114, 128, 0.1);

    color-scheme: light;
  }
}