/* tokens.css — Design tokens landing /credencial — mobile-first, :root centralizado */
@import url("/static/css/tokens-global.css");

:root {
  /* Herencia marca aprobada */
  --cr-primary: var(--token-primary);
  --cr-primary-hover: var(--token-primary-hover);
  --cr-primary-soft: var(--token-indigo-soft);
  --cr-accent: var(--token-teal);
  --cr-success: var(--token-success);
  --cr-danger: var(--token-danger);

  /* Superficie y texto */
  --cr-bg: #f8fafc;
  --cr-surface: #ffffff;
  --cr-surface-alt: #f1f5f9;
  --cr-text: var(--token-text);
  --cr-text-muted: var(--token-text-muted);
  --cr-slate: var(--token-slate);
  --cr-border: #e2e8f0;
  --cr-border-strong: #cbd5e1;

  /* Radios y sombras */
  --cr-radius-sm: 10px;
  --cr-radius-md: 16px;
  --cr-radius-lg: 20px;
  --cr-radius-xl: 28px;
  --cr-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --cr-shadow-md: 0 4px 24px rgba(0,0,0,.06);
  --cr-shadow-lg: 0 12px 40px rgba(0,0,0,.10);
  --cr-shadow-flip: 0 20px 60px rgba(37,99,235,.18);

  /* Espaciado fluido */
  --cr-pad: clamp(16px, 4vw, 32px);
  --cr-section-pad: clamp(32px, 6vw, 72px);
  --cr-max-w: 1120px;
  --cr-content-w: 720px;

  /* Tipografía fluida */
  --cr-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  --cr-text-xs: clamp(.75rem, 1.2vw, .8125rem);
  --cr-text-sm: clamp(.875rem, 1.6vw, .9375rem);
  --cr-text-base: clamp(1rem, 2vw, 1.0625rem);
  --cr-text-lg: clamp(1.125rem, 2.4vw, 1.25rem);
  --cr-text-xl: clamp(1.25rem, 3vw, 1.5rem);
  --cr-text-2xl: clamp(1.5rem, 4vw, 2rem);
  --cr-text-3xl: clamp(1.875rem, 5vw, 2.5rem);
  --cr-text-hero: clamp(2rem, 6vw, 3.25rem);

  /* Animación */
  --cr-ease: cubic-bezier(.4,0,.2,1);
  --cr-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --cr-duration: 600ms;
  --cr-duration-fast: 200ms;
}