/* =====================================================================
   DESIGN TOKENS
   =====================================================================
   Estos son los "ingredientes" del sistema de diseño: colores,
   tipografía y medidas base. No hay estilos visuales de página acá,
   solo variables (custom properties) para que todo el sitio use los
   mismos valores en vez de números sueltos repetidos por todos lados.

   Fuente: componentes "Button", "purple-tint-palette", "Gray" (Frame
   793) y "Typographic Scale" del archivo de Figma.
   ===================================================================== */

:root {
  /* ---------- Color / Purple ----------
     50-900 tal cual está en Figma (purple-tint-palette). 950 es un
     agregado nuestro (no está en Figma) para el botón Dark — 900 no
     se sentía lo bastante "negro" para un estado enabled; se calculó
     siguiendo la misma progresión de oscurecimiento que ya traía la
     escala (~0.64x por escalón desde 900), no un negro puro, para que
     se mantenga dentro de la familia de la marca. */
  --color-purple-50: #f6f4fa;
  --color-purple-100: #edeaf5;
  --color-purple-200: #dbd5ec;
  --color-purple-300: #c1b6e0;
  --color-purple-400: #9a89cc;
  --color-purple-500: #614685;
  --color-purple-600: #523b75;
  --color-purple-700: #422e63;
  --color-purple-800: #31214f;
  --color-purple-900: #1c1335;
  --color-purple-950: #120c22;

  /* ---------- Color / Gray ----------
     Escala completa tal cual está en Figma (Frame 793 "Gray"). */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  /* 550 — agregado nuestro (no está en Figma), mismo criterio que
     Purple 950: un paso intermedio que no existía en la escala.
     Texto secundario (captions, ficha Role/Team/Timeline) sobre
     --color-bg (#F3F1ED): con Gray 500 el contraste da 4.29:1 (no
     llega al mínimo WCAG AA de 4.5:1 para texto normal); con Gray 600
     da 6.71:1, que cumple pero se siente más pesado de lo que David
     quería para un texto secundario. Este valor se calculó para caer
     justo en el mínimo aceptable (~4.5:1) — visualmente más liviano
     que 600, sin dejar de cumplir el estándar. */
  --color-gray-550: #666e7c;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* ---------- Color / Red (destructive) ----------
     Solo existen estos 3 tonos en el componente Button de Figma
     (no hay una escala 50-900 completa como Purple/Gray). */
  --color-red-200: #ebb2b2;
  --color-red-500: #e53333;
  --color-red-700: #bf2626;

  /* ---------- Color / Superficie y texto ----------
     Alias semánticos: en vez de usar "purple-500" directo en el
     layout, usamos un nombre que dice PARA QUÉ es el color. Así, si
     el color de marca cambia algún día, se edita en un solo lugar. */
  --color-bg: #f3f1ed;
  --color-text: var(--color-gray-800);
  --color-text-black: #1a1a1a;
  --color-text-white: #f3f1ed;
  --color-brand: var(--color-purple-500);
  --color-dark: var(--color-gray-900);
  /* Fondo del header + hero en las páginas de detalle de proyecto
     (ej. Onboarding Tool) — #EBEBEB tal cual en Figma. Ahí tampoco es
     un token de su escala Gray, es un valor literal local al frame,
     por eso lo tratamos igual acá: alias semántico, no parte de la
     escala --color-gray-*. */
  --color-surface-project: #ebebeb;

  /* ---------- Tipografía ----------
     Familias realmente usadas en los componentes (el "Typographic
     Scale" de Figma está en Roboto, pero el Button usa Inter y el
     hero usa Work Sans — priorizamos lo que los componentes reales
     usan). */
  --font-display: "Work Sans", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Fuente paga (Fischbach la tiene licenciada), usada solo en el
     título de las páginas de detalle de proyecto (ej. "Onboarding
     Tool") — no es parte del sistema tipográfico general del sitio,
     por eso no reemplaza --font-display. Archivo real vía @font-face
     más abajo; solo se trajo el peso Bold/700 (el único que se usa
     hoy) para no cargar pesos sin usar. */
  --font-din-next: "DIN Next LT Pro", var(--font-display);

  /* Fuente real de brand.youtube (títulos), self-hosted desde el propio
     CDN de Google — usada solo en project-youtube-discovery.html
     (--font-display redefinido SOLO ahí, ver project-youtube-discovery.css),
     mismo criterio que --font-din-next arriba: no reemplaza --font-display
     acá. Archivo real vía @font-face en components.css. */
  --font-youtube-display: "YouTubeDisplay", var(--font-display);

  /* Escala tipográfica (tamaño / interlineado), tomada de la pieza
     "Typographic Scale" de Figma. Pensada para contenido futuro
     (párrafos, tarjetas, etc.) — el título del hero ya tiene su
     propio tamaño exacto (216.61px) y no usa esta escala. */
  --text-h1-size: 45px;
  --text-h1-line: 52px;
  --text-h2-size: 36px;
  --text-h2-line: 44px;
  --text-h3-size: 28px;
  --text-h3-line: 36px;
  --text-h4-size: 22px;
  --text-h4-line: 28px;
  --text-h5-size: 18px;
  --text-h5-line: 24px;
  --text-body-lg-size: 16px;
  --text-body-lg-line: 24px;
  --text-body-size: 14px;
  --text-body-line: 20px;
  --text-body-sm-size: 12px;
  --text-body-sm-line: 16px;
  --text-caption-size: 11px;
  --text-caption-line: 14px;
  --text-overline-size: 10px;
  --text-overline-line: 14px;
  --text-overline-tracking: 0.15em;

  /* ---------- Layout grid (Desktop) ----------
     Igual al "Layout Grid" configurado en el frame de Figma: 12
     columnas, 70px de margen lateral, 20px de espacio entre
     columnas, sobre un frame de referencia de 1440px. */
  --grid-columns: 12;
  --grid-margin: 70px;
  --grid-gutter: 20px;
  --grid-max-width: 1440px;

  /* ---------- Breakpoints y grids de Tablet / Mobile ----------
     Cortes de ancho estándar de industria (los mismos que usan
     Bootstrap 5 y Tailwind, entre otros): Mobile <768px, Tablet
     768–1023px, Desktop ≥1024px. No son variables usables dentro de
     @media (la spec de CSS no permite var() ahí) — quedan como
     referencia documentada; los @media reales que las necesiten van
     con el número literal.

     Columnas/márgenes/gutters de Tablet y Mobile: estándar de
     industria también (mismos valores que Figma trae por default en
     sus presets de grid responsivo, y muy cerca de la spec de
     Material Design 3 — Compact: 4 columnas/16dp margen, Medium:
     8 columnas/24-32dp margen). Los anchos de referencia (768/375)
     son los tamaños de diseño típicos para cada categoría (tablet
     portrait / iPhone estándar), no anchos "reales" de ningún
     dispositivo puntual.

     Alimentan el selector de breakpoints del overlay de grilla
     (#dev-tools, visible solo en localhost) para previsualizar cada
     grid, y --grid-tablet-margin/--grid-mobile-margin (junto con sus
     --grid-*-gutter) ya se usan también en los @media reales de Home,
     Onboarding Tool y YouTube Compass (ver css/styles.css) para achicar
     --grid-margin/--grid-gutter a esos anchos — Resume y Design System
     quedan afuera de esa adaptación por ahora. */
  --grid-tablet-width: 768px;
  --grid-tablet-columns: 8;
  --grid-tablet-margin: 32px;
  --grid-tablet-gutter: 16px;

  --grid-mobile-width: 375px;
  --grid-mobile-columns: 4;
  --grid-mobile-margin: 16px;
  --grid-mobile-gutter: 16px;

  /* ---------- Espaciado ----------
     A diferencia de los colores y la tipografía, Figma no tiene un
     componente "Spacing Scale" del que copiar estos valores — es una
     escala de múltiplos de 4px que armamos nosotros para no repetir
     números sueltos por todo el CSS. Cubre los valores que ya se
     usaban en el sitio (8, 24, 40, 60) más los pasos intermedios de
     una progresión estándar, para tener de dónde elegir a futuro. */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-64: 64px;
  --space-96: 96px;
}