/* ═══════════════════════════════════════════════════
   NADIA GARCÍA — Design System Variables
   Dark mode (default) + Light mode + i18n
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300&family=Poppins:wght@200;300;400;500;600&display=swap');

/* ── DARK MODE (default + explicit) ── */
:root,
[data-theme="dark"] {
  --bg:       #0a0a0f;
  --bg2:      #111118;
  --bg3:      #16161f;
  --ink:      #f0eef8;
  --ink-mid:  #9b98b8;
  --ink-dim:  #4a4860;
  --border:       rgba(255,255,255,0.07);
  --border-mid:   rgba(255,255,255,0.12);

  --blue:   #3b6ef5;
  --purple: #7c4ddb;
  --pink:   #d94eb0;
  --coral:  #f0643a;
  --peach:  #f5a06a;

  --g1: linear-gradient(135deg,#3b6ef5 0%,#7c4ddb 35%,#d94eb0 65%,#f0643a 85%,#f5a06a 100%);
  --g2: linear-gradient(120deg,#3b6ef5 0%,#7c4ddb 50%,#d94eb0 100%);
  --g3: linear-gradient(135deg,rgba(59,110,245,0.15) 0%,rgba(217,78,176,0.1) 100%);

  --nav-bg: rgba(10,10,15,0.88);
  --nav-mobile-bg: rgba(10,10,15,0.97);

  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Poppins', sans-serif;

  --fs-display: clamp(3.2rem, 9vw, 8rem);
  --fs-h1:      clamp(2rem, 5vw, 3.8rem);
  --fs-h2:      clamp(1.4rem, 3vw, 2rem);
  --fs-h3:      clamp(1rem, 2vw, 1.3rem);
  --fs-body:    1rem;
  --fs-small:   0.88rem;
  --fs-label:   0.68rem;

  --radius:     12px;
  --radius-sm:  6px;
  --transition: 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --container:  1280px;

  color-scheme: dark;
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --bg:       #f7f6f2;
  --bg2:      #eeecea;
  --bg3:      #e5e3df;
  --ink:      #0f0e17;
  --ink-mid:  #4a4860;
  --ink-dim:  #9b98b8;
  --border:       rgba(0,0,0,0.08);
  --border-mid:   rgba(0,0,0,0.16);

  --nav-bg: rgba(247,246,242,0.90);
  --nav-mobile-bg: rgba(247,246,242,0.98);

  color-scheme: light;
}

/* ── Base transition for theme switching ── */
*, *::before, *::after {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}
/* But keep layout/transform transitions snappy */
.project-card, .filter-btn, .nav-links a, .ticker-track {
  transition: var(--transition);
}