/* ===========================================================================
   tokens.css — CONTRATO DE DISENO (archivo de solo lectura para el agente)
   ---------------------------------------------------------------------------
   Define QUE tokens existen y como se consumen. Los VALORES los escribe el
   agente en css/theme.css, que se carga despues de este archivo.

   Cinco roles de color, y ni uno mas:
     background · primary · accent · secondary · foreground
   Cada uno con escala 50 -> 950, guardada como canales OKLCH sueltos
   ("L C H", sin la funcion oklch()) para poder aplicar opacidad.
   =========================================================================== */

:root {
  /* --- Paleta por defecto (theme.css la sobrescribe) --------------------- */
  --background-50: 0.99 0.004 90;
  --background-100: 0.97 0.006 90;
  --background-200: 0.94 0.008 90;
  --background-300: 0.89 0.010 90;
  --background-400: 0.80 0.012 90;
  --background-500: 0.68 0.012 90;
  --background-600: 0.55 0.010 90;
  --background-700: 0.42 0.009 90;
  --background-800: 0.30 0.007 90;
  --background-900: 0.20 0.006 90;
  --background-950: 0.13 0.005 90;

  --primary-50: 0.96 0.02 250;
  --primary-100: 0.92 0.04 250;
  --primary-200: 0.86 0.07 250;
  --primary-300: 0.78 0.10 250;
  --primary-400: 0.68 0.13 250;
  --primary-500: 0.58 0.15 250;
  --primary-600: 0.49 0.14 250;
  --primary-700: 0.40 0.12 250;
  --primary-800: 0.31 0.09 250;
  --primary-900: 0.23 0.06 250;
  --primary-950: 0.15 0.04 250;

  --accent-50: 0.96 0.02 160;
  --accent-100: 0.92 0.04 160;
  --accent-200: 0.86 0.07 160;
  --accent-300: 0.78 0.10 160;
  --accent-400: 0.70 0.12 160;
  --accent-500: 0.62 0.13 160;
  --accent-600: 0.52 0.12 160;
  --accent-700: 0.42 0.10 160;
  --accent-800: 0.32 0.08 160;
  --accent-900: 0.24 0.05 160;
  --accent-950: 0.16 0.03 160;

  --secondary-50: 0.96 0.008 260;
  --secondary-100: 0.92 0.012 260;
  --secondary-200: 0.86 0.016 260;
  --secondary-300: 0.78 0.020 260;
  --secondary-400: 0.66 0.024 260;
  --secondary-500: 0.55 0.026 260;
  --secondary-600: 0.46 0.024 260;
  --secondary-700: 0.37 0.020 260;
  --secondary-800: 0.28 0.016 260;
  --secondary-900: 0.21 0.012 260;
  --secondary-950: 0.14 0.008 260;

  --foreground-50: 0.98 0.003 260;
  --foreground-100: 0.95 0.004 260;
  --foreground-200: 0.89 0.006 260;
  --foreground-300: 0.80 0.008 260;
  --foreground-400: 0.66 0.010 260;
  --foreground-500: 0.53 0.012 260;
  --foreground-600: 0.43 0.012 260;
  --foreground-700: 0.34 0.011 260;
  --foreground-800: 0.25 0.010 260;
  --foreground-900: 0.17 0.008 260;
  --foreground-950: 0.10 0.006 260;

  /* --- Tipografia: 3 variables, ni una mas ------------------------------- */
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: system-ui, sans-serif;
  --font-label: var(--font-body);

  /* --- Escala tipografica (5 pasos, fluida) ------------------------------ */
  --text-display: clamp(2.75rem, 1.6rem + 5.6vw, 7rem);
  --text-h1: clamp(2rem, 1.3rem + 3.2vw, 4.5rem);
  --text-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  --text-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --text-small: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);

  --leading-display: 0.98;
  --leading-heading: 1.08;
  --leading-body: 1.6;
  --tracking-display: -0.03em;
  --tracking-label: 0.14em;

  /* --- Espaciado: sistema de 8 puntos ------------------------------------ */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  /* Medido contra dos páginas profesionales recientes: aplican 112px por lado
     a 1440px. Estábamos en 129,6 y la página salía un tercio más alta para el
     mismo texto. 7,5vw deja 108px a 1440 y sigue respirando en pantalla ancha. */
  --section-space: clamp(3.75rem, 7.5vw, 8.5rem);
  --gutter: clamp(1rem, 3vw, 2.5rem);
  --content-max: 1280px;

  /* --- Radios: por tipo de elemento, nunca el anticuado 4px -------------- */
  /* Frecuencia real en 187 plantillas profesionales:
     9999px (170) · 16px (116) · 8px (85) · 24px (82) · 12px (76) */
  --radius-card: 16px;
  --radius-control: 8px;
  --radius-sm: 12px;
  --radius-xl: 24px;    /* piezas grandes: hero, imagen destacada, bento */
  --radius-pill: 999px; /* el mas frecuente de todos: botones, etiquetas, fichas */

  /* --- Movimiento -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 700ms;
  /* Para la entrada de recorrido largo (data-amplio): a 700ms una pieza que
     cruza 70px llega demasiado deprisa y se ve como un salto. */
  --dur-slower: 900ms;

  /* --- Alias semanticos listos para usar --------------------------------- */
  --c-bg: oklch(var(--background-50));
  --c-surface: oklch(var(--background-100));
  --c-border: oklch(var(--background-300));
  --c-text: oklch(var(--foreground-900));
  --c-text-mute: oklch(var(--foreground-600));
  --c-primary: oklch(var(--primary-600));
  --c-primary-hover: oklch(var(--primary-500));
  --c-on-primary: oklch(var(--background-50));
  --c-accent: oklch(var(--accent-600));
}

/* Tema oscuro: theme.css puede poner data-scheme="dark" en <html> y redefinir
   estos alias. Aqui va el volteo por defecto para paletas oscuras. */
:root[data-scheme='dark'] {
  --c-bg: oklch(var(--background-950));
  --c-surface: oklch(var(--background-900));
  --c-border: oklch(var(--background-800));
  --c-text: oklch(var(--foreground-100));
  --c-text-mute: oklch(var(--foreground-400));
  /* Sobre fondo oscuro el primario tiene que subir de luminosidad: con el
     mismo 600 del tema claro, la tinta del boton se queda en 4.3:1. */
  --c-primary: oklch(var(--primary-400));
  --c-primary-hover: oklch(var(--primary-300));
  --c-accent: oklch(var(--accent-400));
  --c-on-primary: oklch(var(--background-950));
}