/* ==========================================================================
   Base — Reset, Typography, CSS Variables, Section defaults
   ========================================================================== */

/* --- Design Tokens (override in variants & moods) --- */
:root {
  /* Primary palette */
  --color-accent:       #00d9ff;
  --color-accent-rgb:   0, 217, 255;
  --color-secondary:    #8a2be2;
  --color-secondary-rgb: 138, 43, 226;

  /* Backgrounds */
  --color-bg:           #0a0e13;
  --color-bg-card:      rgba(var(--color-accent-rgb), 0.04);
  --color-bg-card-hover: rgba(var(--color-accent-rgb), 0.08);

  /* Borders */
  --color-border:       rgba(var(--color-accent-rgb), 0.12);
  --color-border-hover: rgba(var(--color-accent-rgb), 0.25);

  /* Text */
  --color-text:         #e0e0e0;
  --color-text-muted:   #7a8a9a;
  --color-text-subtle:  #5a6a7a;
  --color-text-dim:     #6b7f8e;
  --color-heading:      #fff;

  /* Spacing */
  --section-max-width:  1200px;
  --section-padding:    3.5rem 2rem;
  --card-radius:        14px;
  --card-radius-lg:     16px;

  /* Transitions */
  --transition-base:    all 0.3s ease;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

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

/* --- Section defaults --- */
.section {
  max-width: var(--section-max-width);
  margin: 0 auto;
  padding: var(--section-padding);
  display: none;
}

.section.active { display: block; }

.section h2 {
  font-size: 2.2rem;
  margin-bottom: 2rem;
  color: var(--color-heading);
  font-weight: 700;
}

.section h2 span {
  background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
  line-height: 1.8;
}