/* ============================================================
   AGENCIA REINVENTA — DESIGN TOKENS
   Marca: negro #000000 · amarillo #F8C800 · blanco #FFFFFF
   (colores tomados directamente del logo oficial de la agencia)
   Toda variación de color es tinte/opacidad de estos 3 valores.
   ============================================================ */
:root {
  color-scheme: dark;

  /* Marca (tomada del logo real) */
  --black: #000000;
  --gold: #F8C800;
  --white: #FFFFFF;

  /* Tintes tonales del negro (profundidad, no color nuevo) */
  --surface-0: #000000;
  --surface-1: #0A0A0A;
  --surface-2: #121212;
  --surface-3: #1A1A1A;
  --surface-4: #232323;

  /* Tintes del amarillo de marca (estados / acentos) */
  --gold-10: rgba(248, 200, 0, 0.10);
  --gold-20: rgba(248, 200, 0, 0.20);
  --gold-35: rgba(248, 200, 0, 0.35);
  --gold-60: rgba(248, 200, 0, 0.60);
  --gold-strong: #FFDE59;
  --gold-deep: #F89800;

  /* Tintes del blanco (texto / bordes) */
  --white-100: #FFFFFF;
  --white-80: rgba(255, 255, 255, 0.80);
  --white-60: rgba(255, 255, 255, 0.60);
  --white-40: rgba(255, 255, 255, 0.40);
  --white-20: rgba(255, 255, 255, 0.14);
  --white-10: rgba(255, 255, 255, 0.08);
  --white-05: rgba(255, 255, 255, 0.04);

  /* Tipografía */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --fs-4xl: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* Elevación (sombras sobre negro, sin introducir color) */
  --shadow-gold: 0 8px 30px -8px rgba(248, 200, 0, 0.45);
  --shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.8);

  --header-h: 84px;
}