/*
 * Tokens de MÖMENTS para las maquetas.
 * Copia de src/styles/tokens.css (mismos nombres y valores) como variables CSS en :root,
 * porque las maquetas no pasan por Tailwind. Si cambian los tokens reales, se actualiza aquí.
 */
:root {
  /* Marca */
  --color-obsidian: #171717;
  --color-ivory: #f8f5ef;
  --color-coral: #ff6b5f;
  --color-coral-hover: #ff5a4d; /* coral del botón principal al pasar por encima: 5,8:1 con Obsidian */
  --color-coral-ink: #c23b30; /* coral para texto: 4,87:1 sobre Ivory */
  --color-lavender: #8b7cf6;
  --color-lavender-ink: #5e4bd4; /* lavanda para texto: 5,62:1 sobre Ivory */
  --color-pink: #f5d9dc;
  --color-white: #ffffff;

  /* Valores base de los colores funcionales */
  --color-ink-muted-base: #6b6560;
  --color-line-base: #d8d2c8;
  --color-control-base: #8c857c;
  --color-error-base: #b42318;
  --color-warning-base: #8a5a00;
  --color-success-base: #176b45;

  /* Roles que usan los componentes; la sección oscura los redefine (DS-23). */
  --color-bg: var(--color-ivory);
  --color-surface: var(--color-white);
  --color-ink: var(--color-obsidian);
  --color-ink-muted: var(--color-ink-muted-base);
  --color-line: var(--color-line-base);
  --color-control: var(--color-control-base);
  --color-accent: var(--color-coral);
  --color-accent-hover: var(--color-coral-hover);
  --color-on-accent: var(--color-obsidian);
  --color-accent-ink: var(--color-coral-ink);
  --color-error: var(--color-error-base);
  --color-warning: var(--color-warning-base);
  --color-success: var(--color-success-base);
  --color-info: var(--color-lavender-ink);
  --color-focus: var(--color-obsidian);

  /* Tipografía: en las maquetas se cargan desde Google Fonts (en la app, next/font). */
  --font-manrope: "Manrope";
  --font-dm-serif: "DM Serif Display";
  --font-sans: var(--font-manrope), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: var(--font-dm-serif), ui-serif, Georgia, "Times New Roman", serif;

  --text-sm: 0.875rem;
  --text-sm--line-height: 1.45;
  --text-base: 1rem;
  --text-base--line-height: 1.6;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.55;
  --text-xl: 1.25rem;
  --text-xl--line-height: 1.45;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 1.3;
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 1.12;
  --text-5xl: 3rem;
  --text-5xl--line-height: 1.05;

  /* Espaciado: base de 4 px */
  --spacing: 0.25rem;

  /* Ancho máximo del contenedor de página (en la app, utilidad max-w-page) */
  --container-page: 72rem;

  /* Radios */
  --radius-control: 0.75rem;
  --radius-card: 1rem;
  --radius-sheet: 1.5rem;
  --radius-pill: 9999px;

  /* Sombras: suaves y cálidas, con base Obsidian */
  --shadow-card: 0 1px 2px rgb(23 23 23 / 0.06), 0 8px 24px -12px rgb(23 23 23 / 0.18);
  --shadow-raised: 0 2px 4px rgb(23 23 23 / 0.08), 0 16px 40px -16px rgb(23 23 23 / 0.28);

  /* Movimiento (DS-24) */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Puntos de corte (referencia; en CSS se usan los valores literales en @media): 640, 1024, 1280 px */
  --breakpoint-sm: 40rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
}