/* ============================================================
   BASE — Variables, Reset, Typography
   Loaded on every page.
   ============================================================ */

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

/* ── Custom Properties — Light Mode (default) ── */
:root {
  --bg:            #ffffff;
  --bg-alt:        #f6f6fa;
  --card:          #f2f2f7;
  --card-hover:    #e9e9f4;
  --border:        #e2e2ec;
  --border-lit:    #d0d0e0;

  --accent:        #07a0f6;
  --accent-light:  #38b4f8;
  --accent-dim:    rgba(7, 160, 246, 0.09);
  --accent-glow:   rgba(7, 160, 246, 0.22);

  --secondary:     #512DA8;
  --secondary-dim: rgba(81, 45, 168, 0.07);

  --text:          #111118;
  --text-muted:    #55556a;
  --text-dim:      #9898b0;
  --white:         #ffffff;

  --nav-bg:        rgba(255, 255, 255, 0.92);
  --nav-bg-solid:  rgba(255, 255, 255, 0.98);

  --nav-height:    68px;
  --radius:        12px;
  --radius-sm:     8px;
  --radius-xs:     6px;
  --shadow:        0 2px 16px rgba(0, 0, 0, 0.06);
  --shadow-md:     0 4px 24px rgba(0, 0, 0, 0.09);
  --shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.13);

  --ease:          0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      150ms;
  --dur-base:      250ms;
  --dur-slow:      400ms;
  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --bg:            #0a0a10;
  --bg-alt:        #0f0f18;
  --card:          #141420;
  --card-hover:    #1a1a28;
  --border:        #1e1e2e;
  --border-lit:    #262638;

  --text:          #dde1ec;
  --text-muted:    #7b7b99;
  --text-dim:      #4b4b65;
  --white:         #ffffff;

  --nav-bg:        rgba(10, 10, 16, 0.90);
  --nav-bg-solid:  rgba(10, 10, 16, 0.98);

  --shadow:        0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-md:     0 6px 32px rgba(0, 0, 0, 0.55);
  --shadow-lg:     0 12px 48px rgba(0, 0, 0, 0.65);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

img { max-width: 100%; height: auto; display: block; }
ul  { list-style: none; padding: 0; margin: 0; }

a,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
  color: inherit;
  transition: color var(--ease);
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text);
}

h1 { font-size: clamp(2.8rem, 7vw, 5rem);     font-weight: 800; }
h2 { font-size: clamp(2rem,   4vw, 2.8rem);   font-weight: 800; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 700; }
h4 { font-size: 1.1rem; font-weight: 600; }

h5 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

p {
  color: var(--text-muted);
  line-height: 1.85;
  font-size: 0.97rem;
}