@charset "UTF-8";
/* ====================================================================
   tokens.css — variables de diseño LDF.
   Toda la marca (color, tipografía, espaciado, sombras, radius) se
   define aquí. Cualquier valor "mágico" que aparezca en otros CSS
   debería referenciar una variable de este archivo.
   ==================================================================== */

:root {
  /* --- Marca --------------------------------------------------------- */
  --df-magenta-900: #7A0A52;
  --df-magenta-700: #B5007A;
  --df-magenta-500: #C71585;
  --df-magenta-300: #E27FB7;
  --df-magenta-100: #F5D6E7;
  --df-magenta-050: #FCEEF5;

  /* --- Neutros (gris cálido) ---------------------------------------- */
  --df-ink-900:    #1A1A1A;
  --df-ink-700:    #4A4A4A;
  --df-ink-500:    #7A7A7A;
  --df-ink-300:    #B8B8B8;
  --df-ink-200:    #D9D9D9;
  --df-ink-100:    #F2F2F2;
  --df-ink-050:    #FAFAFA;
  --df-paper:      #FFFFFF;

  /* --- Soporte ------------------------------------------------------- */
  --df-success:    #1F8B5A;
  --df-warning:    #C97A1F;
  --df-danger:     #B23A2A;
  --df-info:       #2A6BC9;

  /* --- Tipografía ---------------------------------------------------- */
  --df-font-display: "Inter Tight", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --df-font-body:    "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --df-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono", monospace;

  --fs-display-xl: clamp(2.5rem, 6vw, 4.75rem);
  --fs-display-l:  clamp(2rem,   5vw, 3.5rem);
  --fs-display-m:  clamp(1.75rem,4vw, 2.5rem);
  --fs-h1:         clamp(1.625rem, 3vw, 2rem);
  --fs-h2:         1.5rem;
  --fs-h3:         1.25rem;
  --fs-body-l:     1.125rem;
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-meta:       0.8125rem;

  --lh-tight:      1.15;
  --lh-snug:       1.35;
  --lh-base:       1.55;
  --lh-loose:      1.7;

  /* --- Espaciado (8px base) ----------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;

  /* --- Layout -------------------------------------------------------- */
  --container-w:    1280px;
  --container-pad:  var(--sp-6);

  /* --- Bordes y esquinas -------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --border-thin:  1px solid var(--df-ink-200);
  --border-base:  1px solid var(--df-ink-300);

  /* --- Sombras ------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 24px 48px rgba(0,0,0,.10);

  /* --- Transiciones -------------------------------------------------- */
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:     150ms var(--ease-apple);
  --t-base:     250ms var(--ease-apple);
  --t-slow:     400ms var(--ease-apple);

  /* --- Foco accesible ----------------------------------------------- */
  --focus-ring: 0 0 0 3px var(--df-magenta-300);

  /* --- Z-index ------------------------------------------------------- */
  --z-nav:    100;
  --z-modal:  1000;
  --z-toast:  2000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:  0ms;
    --t-base:  0ms;
    --t-slow:  0ms;
  }
}