/* ========================================
   BASE.CSS — Variables, Reset, Typography
   GenovaLauncher Website
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700;900&family=IBM+Plex+Mono:wght@400;500;600&family=Barlow:wght@300;400;500&display=swap');

:root {
  --bg:        #f5f4f0;
  --bg-alt:    #eceae4;
  --bg-card:   #ffffff;
  --fg:        #111111;
  --fg-muted:  #555555;
  --fg-faint:  #aaaaaa;
  --accent:    #d4a017;
  --accent-inv:#ffffff;
  --border:    #d8d5ce;
  --tag-bg:    #111111;
  --tag-fg:    #f5f4f0;
  --code-bg:   #1a1a1a;
  --code-fg:   #e8e8e8;
  --shadow:    0 2px 24px rgba(0,0,0,0.07);
  --radius:    4px;
  --transition:0.25s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --bg:        #111111;
  --bg-alt:    #1a1a1a;
  --bg-card:   #1e1e1e;
  --fg:        #f0ede6;
  --fg-muted:  #999999;
  --fg-faint:  #444444;
  --accent:    #f0c040;
  --accent-inv:#111111;
  --border:    #2e2e2e;
  --tag-bg:    #f0ede6;
  --tag-fg:    #111111;
  --code-bg:   #0a0a0a;
  --code-fg:   #d4cfbf;
  --shadow:    0 2px 24px rgba(0,0,0,0.4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  background-color: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  transition: background-color var(--transition), color var(--transition);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
}

.display {
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: 0.88;
}

.section-title {
  font-size: clamp(2rem, 6vw, 4.5rem);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

::selection { background: var(--fg); color: var(--bg); }