/* ============================================================
   RecibIA — Design Tokens
   Extends the --fs-* system already defined for the product PWA
   with landing-specific values (paper tone, gradient stops).
   ============================================================ */

:root {
  /* --- Color: core brand (shared with PWA) --- */
  --ri-teal: #0D9488;
  --ri-teal-light: #2DD4BF;
  --ri-teal-deep: #0B4A44;
  --ri-navy: #16202E;
  --ri-navy-950: #0B1220;
  --ri-gold: #D4A017;
  --ri-gold-light: #E8C547;

  /* --- Color: surfaces --- */
  --ri-paper: #F7F5F1;      /* warm off-white, not stark white */
  --ri-surface: #FFFFFF;
  --ri-ink: #16202E;
  --ri-ink-soft: #56616F;
  --ri-ink-faint: #8993A1;
  --ri-border: #E4E0D8;

  /* --- Color: on-dark --- */
  --ri-ink-inverse: #F7F5F1;
  --ri-ink-inverse-soft: #A9B4C0;

  /* --- Gradients (mirrors the logo mark's own teal -> navy sweep) --- */
  --ri-gradient-hero: linear-gradient(155deg, #0F2A2A 0%, #0B1220 55%, #0B1220 100%);
  --ri-gradient-brand: linear-gradient(135deg, var(--ri-teal-light) 0%, var(--ri-teal) 55%, var(--ri-teal-deep) 100%);
  --ri-gradient-glow: radial-gradient(60% 60% at 70% 30%, rgba(45, 212, 191, 0.28) 0%, rgba(45, 212, 191, 0) 70%);

  /* --- Type --- */
  --ri-font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --ri-font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --ri-font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  --ri-text-xs: 0.75rem;
  --ri-text-sm: 0.875rem;
  --ri-text-base: 1rem;
  --ri-text-md: 1.125rem;
  --ri-text-lg: 1.375rem;
  --ri-text-xl: 1.75rem;
  --ri-text-2xl: 2.25rem;
  --ri-text-3xl: 3rem;
  --ri-text-4xl: 3.75rem;

  /* --- Space --- */
  --ri-space-2xs: 0.375rem;
  --ri-space-xs: 0.625rem;
  --ri-space-sm: 1rem;
  --ri-space-md: 1.5rem;
  --ri-space-lg: 2.5rem;
  --ri-space-xl: 4rem;
  --ri-space-2xl: 6rem;
  --ri-space-3xl: 8rem;

  /* --- Shape --- */
  --ri-radius-sm: 0.5rem;
  --ri-radius-md: 1rem;
  --ri-radius-lg: 1.5rem;
  --ri-radius-full: 9999px;

  /* --- Motion --- */
  --ri-duration: 400ms;
  --ri-easing: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Layout --- */
  --ri-container: 1180px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ri-duration: 0ms;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}