/* ============================================================
   themes.css — CSS Custom Properties for Dark / Light Mode
   Mariano Gendra Personal Website
   ============================================================ */

/* ── Default: Dark Mode ── */
:root {
  --bg:            #0D0F14;
  --surface:       #161A23;
  --surface-alt:   #1E2330;
  --surface-hover: #222840;

  --text:          #F1F3F9;
  --text-muted:    #8D96A8;
  --text-faint:    #4A5568;

  --accent:        #3B82F6;
  --accent-hover:  #60A5FA;
  --accent-rgb:    59, 130, 246;

  --border:        #262C3A;
  --border-hover:  #3B4460;

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.5);

  --nav-bg:        rgba(13,15,20,0.85);
  --nav-border:    rgba(38,44,58,0.8);

  --code-bg:       #0A0C10;
  --tag-bg:        rgba(59,130,246,0.1);
  --tag-border:    rgba(59,130,246,0.25);

  --hero-dot:      rgba(59,130,246,0.08);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --transition: 0.2s ease;
  --transition-slow: 0.4s ease;
}

/* ── Light Mode ── */
[data-theme="light"] {
  --bg:            #FAFAFA;
  --surface:       #FFFFFF;
  --surface-alt:   #F4F4F6;
  --surface-hover: #ECEEF2;

  --text:          #0F1117;
  --text-muted:    #5B6478;
  --text-faint:    #9BA3B2;

  --accent:        #2563EB;
  --accent-hover:  #1D4ED8;
  --accent-rgb:    37, 99, 235;

  --border:        #E2E5EC;
  --border-hover:  #C4C9D6;

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.12);

  --nav-bg:        rgba(250,250,250,0.9);
  --nav-border:    rgba(226,229,236,0.9);

  --code-bg:       #F0F2F8;
  --tag-bg:        rgba(37,99,235,0.08);
  --tag-border:    rgba(37,99,235,0.2);

  --hero-dot:      rgba(37,99,235,0.05);
}

/* ── Transition all color properties smoothly on theme switch ── */
*,
*::before,
*::after {
  transition:
    background-color var(--transition-slow),
    border-color var(--transition-slow),
    color var(--transition-slow),
    box-shadow var(--transition-slow);
}

/* Exclude transitions for elements where they look wrong */
img,
svg,
.no-transition,
.hero-role-text,
[data-filter-btn] {
  transition: none !important;
}