/* ========================================
   BASE — Reset, Variables, Typography, Layout
   ======================================== */

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

/* Design Tokens */
:root {
  /* Surface hierarchy - Exact Gemini colors */
  --color-surface: #131313;
  --color-surface-low: #1C1B1B;
  --color-surface-high: #2A2A2A;
  --color-surface-highest: #353534;
  --color-surface-lowest: #0E0E0E;

  /* Accents - Exact Gemini colors */
  --color-electric-red: #FF2D55;
  --color-digital-cyan: #25F4EE;
  --color-deep-purple: #9B5DE5;

  /* Text - Exact Gemini colors */
  --color-text: #e5e2e1;
  --color-text-muted: #e6bcbd;
  --color-text-faded: #5d3f40;
  --color-on-red: #40000C;
  --color-on-cyan: #006764;

  /* Functional */
  --color-error: #FF453A;

  /* Spacing */
  --space-section: 120px;
  --space-block: 64px;
  --space-element: 32px;
  --space-tight: 16px;
  --space-micro: 8px;

  /* Max width */
  --max-width: 1280px;
}

/* Typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&family=Epilogue:wght@400;500;600;700;800&family=Archivo+Black&display=swap');

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

body {
  font-family: 'Epilogue', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Type scale */
.text-display {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.text-headline-lg {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

.text-headline-md {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}

.text-title {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
}

.text-body-lg {
  font-size: 1rem;
  line-height: 1.6;
}

.text-body-sm {
  font-size: 0.875rem;
  line-height: 1.5;
}

.text-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Color utility classes */
.text-red { color: var(--color-electric-red); }
.text-cyan { color: var(--color-digital-cyan); }
.text-purple { color: var(--color-deep-purple); }
.text-muted { color: var(--color-text-muted); }

/* Section shared layout */
.section {
  width: 100%;
  padding: var(--space-section) var(--space-element);
}

.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Section backgrounds */
.bg-surface { background-color: var(--color-surface); }
.bg-surface-low { background-color: var(--color-surface-low); }
.bg-surface-high { background-color: var(--color-surface-high); }
.bg-surface-lowest { background-color: var(--color-surface-lowest); }
.bg-red { background-color: var(--color-electric-red); color: var(--color-on-red); }
.bg-cyan { background-color: var(--color-digital-cyan); color: var(--color-on-cyan); }
.bg-purple { background-color: var(--color-deep-purple); }

/* Scroll reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links */
a {
  color: var(--color-digital-cyan);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Selection */
::selection {
  background-color: var(--color-electric-red);
  color: var(--color-on-red);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  :root {
    --space-section: 64px;
    --space-block: 40px;
    --space-element: 20px;
  }
}