/* ============================================================
   PGX Framework — Base Styles
   Variables · Reset · Typography · Framework Themes · Buttons
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Global CSS Variables --- */
:root {
  /* Backgrounds */
  --bg-deep:       #0a0a1a;
  --bg-surface:    #111128;
  --bg-card:       rgba(17, 17, 40, 0.6);
  --bg-glass:      rgba(17, 17, 40, 0.45);

  /* Text */
  --text-primary:  #e8e8f0;
  --text-secondary:#9494b8;
  --text-muted:    #5a5a7a;

  /* Accent Colors */
  --accent-purple: #7f00ff;
  --accent-cyan:   #00bcd4;
  --accent-pink:   #e94560;
  --accent-green:  #4caf50;
  --accent-orange: #ff9800;
  --accent-yellow: #ffc107;
  --accent-blue:   #2196f3;
  --accent-magenta:#e91e63;
  --accent-teal:   #008080;

  /* Framework Colors (defaults = Core) */
  --fw-primary:    #7f00ff;
  --fw-secondary:  #00bcd4;
  --fw-gradient:   linear-gradient(135deg, var(--fw-primary), var(--fw-secondary));

  /* Legacy aliases for existing markup */
  --gradient-main: var(--fw-gradient);
  --gradient-hero: linear-gradient(135deg, var(--fw-primary), var(--accent-pink), var(--fw-secondary));
  --gradient-warm: linear-gradient(135deg, var(--accent-pink), var(--accent-orange));

  /* Borders */
  --border-glass:  rgba(255, 255, 255, 0.08);
  --border-hover:  rgba(255, 255, 255, 0.15);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-glow: 0 0 30px rgba(127, 0, 255, 0.15);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Layout */
  --nav-height: 64px;
  --max-width: 1200px;
}

/* --- Framework Color Themes --- */
[data-framework="core"]        { --fw-primary: #7f00ff; --fw-secondary: #00bcd4; }
[data-framework="archviz"]     { --fw-primary: #2196f3; --fw-secondary: #00897b; }
[data-framework="adventure"]   { --fw-primary: #2e7d32; --fw-secondary: #ffc107; }
[data-framework="tactical-rpg"]{ --fw-primary: #1565c0; --fw-secondary: #ff8f00; }
[data-framework="fps"]         { --fw-primary: #d32f2f; --fw-secondary: #ff6d00; }
[data-framework="puzzles"]     { --fw-primary: #00bcd4; --fw-secondary: #7c4dff; }
[data-framework="stealth"]     { --fw-primary: #004d40; --fw-secondary: #90a4ae; }
[data-framework="horror"]      { --fw-primary: #b71c1c; --fw-secondary: #880000; }
[data-framework="quantum"]     { --fw-primary: #2979ff; --fw-secondary: #e040fb; }
[data-framework="dev-tools"]   { --fw-primary: #546e7a; --fw-secondary: #78909c; }

/* Recalculate gradients when theme changes */
[data-framework] {
  --fw-gradient: linear-gradient(135deg, var(--fw-primary), var(--fw-secondary));
  --gradient-main: var(--fw-gradient);
  --gradient-hero: linear-gradient(135deg, var(--fw-primary), var(--accent-pink), var(--fw-secondary));
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 24px);
}

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-cyan); text-decoration: none; transition: color 0.2s; }
a:hover { color: #5ce0f2; }

img { max-width: 100%; display: block; }

ul { list-style: none; }

/* --- Scroll Progress Bar --- */
#scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: var(--fw-gradient);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* --- Container --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* --- Section --- */
.section {
  padding: 100px 0;
  position: relative;
}

.section-label {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 3px;
  color: var(--fw-secondary);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  text-align: center;
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: 0.95rem; font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s;
  border: none;
  font-family: var(--font-body);
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--fw-gradient);
  color: #fff;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--fw-primary) 30%, transparent);
}

.btn-primary:hover {
  box-shadow: 0 6px 30px color-mix(in srgb, var(--fw-primary) 50%, transparent);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-hover);
  color: var(--text-primary);
}

.btn-ghost:hover {
  border-color: var(--fw-primary);
  box-shadow: 0 0 20px color-mix(in srgb, var(--fw-primary) 15%, transparent);
  color: var(--text-primary);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.85rem;
}

/* --- Code Syntax Highlighting (shared) --- */
pre, code {
  font-family: var(--font-mono);
}

.code-tab-content pre .kw  { color: var(--fw-primary); }
.code-tab-content pre .fn  { color: var(--accent-cyan); }
.code-tab-content pre .str { color: var(--accent-green); }
.code-tab-content pre .cmt { color: var(--text-muted); font-style: italic; }
.code-tab-content pre .type{ color: var(--accent-pink); }
.code-tab-content pre .num { color: var(--accent-orange); }
.code-tab-content pre .tag { color: var(--accent-yellow); }

/* --- Utility --- */
.gradient-text {
  background: linear-gradient(
    90deg,
    var(--fw-primary),
    var(--accent-pink),
    var(--fw-secondary),
    var(--fw-primary),
    var(--accent-pink)
  );
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientWave 12s ease-in-out infinite;
}

@keyframes gradientWave {
  0%   { background-position: 20% 50%; }
  25%  { background-position: 60% 0%; }
  50%  { background-position: 80% 50%; }
  75%  { background-position: 40% 100%; }
  100% { background-position: 20% 50%; }
}

.text-center { text-align: center; }
.mt-48 { margin-top: 48px; }
.mt-40 { margin-top: 40px; }

/* --- Secondary Page Header --- */
.page-header {
  padding: calc(var(--nav-height) + 60px) 0 40px;
  text-align: center;
}

.page-header h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin-bottom: 12px;
}

/* --- Responsive Base --- */
@media (max-width: 480px) {
  .section { padding: 60px 0; }
}