/* ============================================================
   THEMES — Dark / Light Mode via CSS Custom Properties
   ============================================================ */

:root {
  /* Default: Light Mode */
  --bg-primary:       #ffffff;
  --bg-secondary:     #f5f5f7;
  --bg-tertiary:      #e8e8ed;
  --bg-card:          #ffffff;
  --bg-card-hover:    #f5f5f7;
  --bg-hero:          #fbfbfd;
  --bg-nav:           rgba(255, 255, 255, 0.82);

  --text-primary:     #1d1d1f;
  --text-secondary:   #6e6e73;
  --text-tertiary:    #707075;
  --text-inverse:     #ffffff;

  --accent:           #0071e3;
  --accent-hover:     #0077ED;
  --accent-light:     rgba(0, 113, 227, 0.08);
  --accent-gradient:  linear-gradient(135deg, #0071e3 0%, #40a0ff 100%);

  --border:           rgba(0, 0, 0, 0.08);
  --border-strong:    rgba(0, 0, 0, 0.16);

  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:        0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl:        0 20px 60px rgba(0, 0, 0, 0.15);

  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        20px;
  --radius-xl:        28px;

  --nav-height:       64px;
  --section-spacing:  120px;

  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

  --transition-fast:  0.15s ease;
  --transition-base:  0.3s ease;
  --transition-slow:  0.6s cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* Dark Mode */
[data-theme="dark"] {
  --bg-primary:       #000000;
  --bg-secondary:     #0a0a0a;
  --bg-tertiary:      #1c1c1e;
  --bg-card:          #1c1c1e;
  --bg-card-hover:    #2c2c2e;
  --bg-hero:          #000000;
  --bg-nav:           rgba(0, 0, 0, 0.82);

  --text-primary:     #f5f5f7;
  --text-secondary:   #a1a1a6;
  --text-tertiary:    #8a8a8f;
  --text-inverse:     #1d1d1f;

  --accent:           #2997ff;
  --accent-hover:     #64b5ff;
  --accent-light:     rgba(41, 151, 255, 0.1);
  --accent-gradient:  linear-gradient(135deg, #2997ff 0%, #64b5ff 100%);

  --border:           rgba(255, 255, 255, 0.08);
  --border-strong:    rgba(255, 255, 255, 0.16);

  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:        0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl:        0 20px 60px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* Smooth transition between themes */
html {
  transition: background-color var(--transition-base),
              color var(--transition-base);
}

body,
.nav-bar,
.card,
.section,
.footer {
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              box-shadow var(--transition-base);
}