/* Fawef · tokens de marca (identidad Espejo, aprobada 2026-11-11)
   Copia este bloque en tu CSS global. Modo oscuro por defecto.
   Los nombres de rol (--color-bg, --color-text, --color-accent…) son los mismos que en Lluman:
   al migrar la web basta con cambiar este archivo y las fuentes. */
:root {
  /* Paleta base */
  --color-ciruela: #17101F;          /* fondo principal */
  --color-ciruela-clara: #251A30;    /* superficies, tarjetas */
  --color-linea: #3A2C47;            /* bordes y separadores (nunca texto) */
  --color-perla: #F7EEF6;            /* texto principal, wordmark */
  --color-lavanda: #BBAAC2;          /* texto secundario */
  --color-coral: #FF7A6B;            /* acento 1: enlaces, inicio del degradado */
  --color-miel: #FFC46B;             /* acento 2: destacados, foco, final del degradado */
  --color-blanco: #FFFFFF;           /* fondo de documentos y correos */
  --color-coral-profundo: #BF4035;   /* Coral como texto o enlace sobre Blanco o Perla */
  --color-lavanda-profunda: #5E4F66; /* texto secundario sobre Blanco o Perla */

  /* Colores exclusivos del logo sobre fondo claro (no usar en la interfaz) */
  --color-logo-coral-claro: #DE5C4F;
  --color-logo-miel-claro: #C2700F;

  /* Degradado "chispa": solo símbolo, botón principal y detalles pequeños */
  --gradient-chispa: linear-gradient(135deg, var(--color-coral), var(--color-miel));

  /* Roles (usa estos en los componentes) */
  --color-bg: var(--color-ciruela);
  --color-surface: var(--color-ciruela-clara);
  --color-border: var(--color-linea);
  --color-text: var(--color-perla);
  --color-text-muted: var(--color-lavanda);
  --color-accent: var(--color-coral);
  --color-accent-2: var(--color-miel);
  --color-on-accent: var(--color-ciruela);
  --color-focus: var(--color-miel);
  --glow-chispa: radial-gradient(60% 60% at 50% 40%, rgb(255 122 107 / 0.14), transparent 70%);

  /* Tipografía */
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-serif); /* titulares H1 y H2 */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* solo para código */

  --text-h1: clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);    /* 44 → 72 px · Instrument Serif */
  --text-h2: clamp(2rem, 1.6rem + 1.8vw, 3rem);         /* 32 → 48 px · Instrument Serif */
  --text-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); /* 19 → 22 px · Manrope 600 */
  --text-body: 1.0625rem;                               /* 17 px */
  --text-small: 0.875rem;                               /* 14 px */
  --text-label: 0.75rem;                                /* 12 px · etiquetas en mayúsculas */
  --text-mono: var(--text-label);                       /* compatibilidad con Lluman */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-h1: -0.01em;
  --tracking-h2: -0.005em;
  --tracking-h3: -0.01em;
  --tracking-body: 0;
  --tracking-label: 0.08em;
  --tracking-mono: var(--tracking-label);               /* compatibilidad con Lluman */

  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.6;

  /* Espaciado (base 4 px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radios (el icono usa un 22 % de su lado) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* Ancho de contenido */
  --container: 1120px;
}