:root {
  /* Colors - Blue Wise Capital (New Palette) */
  --color-dark: #0F172A;
  /* Deep Slate/Navy */
  --color-dark-deep: #020617;
  /* Darker Navy */
  --color-cream: #F1F5F9;
  /* Light Slate/Cool Grey */
  --color-cream-light: #F8FAFC;

  /* Accents */
  --color-accent1: #3B82F6;
  /* Royal Blue */
  --color-accent2: #1D4ED8;
  /* Deep Blue */

  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Typography */
  --font-heading: 'Questrial', sans-serif;
  --font-body: 'Montserrat', sans-serif;
}

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

body {
  font-family: var(--font-body);
  background-color: var(--color-dark);
  color: var(--color-cream);
  line-height: 1.6;
}

/* Typography Utilities */
.font-heading {
  font-family: var(--font-heading);
}

.font-body {
  font-family: var(--font-body);
}

/* Color Utilities */
.bg-dark {
  background-color: var(--color-dark);
}

.text-dark {
  color: var(--color-dark);
}

.bg-cream {
  background-color: var(--color-cream);
}

.text-cream {
  color: var(--color-cream);
}

.text-accent1 {
  color: var(--color-accent1);
}

.bg-accent1 {
  background-color: var(--color-accent1);
}

.bg-accent2 {
  background-color: var(--color-accent2);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulseSlow {

  0%,
  100% {
    opacity: 0.1;
    transform: scale(1);
  }

  50% {
    opacity: 0.2;
    transform: scale(1.1);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 1s ease-out 0.3s forwards;
  opacity: 0;
  /* Init hidden */
}

.animate-pulse-slow {
  animation: pulseSlow 6s infinite ease-in-out;
}

/* Utility Animations Classes (for JS Observer) */
.reveal-hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-dark);
}

::-webkit-scrollbar-thumb {
  background: #5c3a21;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent1);
}

/* Tailwiind-ish Utilities reimplementation (if needed specifically, but using Tailwind CDN/Vite in project usually handles this. 
   Wait, I assumed Tailwind in HTML classes but I am writing Vanilla CSS as "Setup assets".
   Actually, the User plan mentioned "Initialize project (Vite + Vanilla JS)".
   The HTML I wrote uses Tailwind classes (e.g. `flex`, `hidden md:block`, `text-xl`). 
   If I am not using Tailwind build process, I need to include Tailwind CDN or write these classes manually.
   
   DECISION: To ensure "High Performance" as requested, I should probably use the actual Tailwind CLI via Vite or just include the CDN for the prototype speed.
   However, the user asked for "Vanilla CSS" in a previous turn context? No, that was a previous conversation.
   In *this* request: "Diseña y construye un sitio web".
   I used Tailwind classes in HTML because it's efficient for "One Page". 
   To make them work without setup overhead, I will add the Tailwind CDN Script to the HTML in the next step or just verify if I should use it.
   
   Actually, I will Add the Tailwind script to the HTML now to make sure the styling works immediately.
*/