/* Fintick — hoja de estilos combinada para despliegue. */

/* Fintick webfonts — both families self-hosted from uploaded variable TTFs. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* Fintick — Color tokens (paleta v3: tinta + coral)
   Nota de nomenclatura: se mantienen los nombres --green-* / --lime-*
   por compatibilidad interna; los valores son ahora ink / coral. */
:root {
  /* Ink (primario) */
  --green-900: #0D1117;   /* ink más oscuro */
  --green-700: #1C2035;   /* PRIMARY — ink profundo */
  --green-600: #2A3050;
  --green-500: #3E4875;
  --green-100: #DEE0EE;
  --green-50:  #ECEEF7;

  /* Coral (acento) */
  --lime-500: #FF5745;    /* ACCENT / CTAs */
  --lime-600: #E84030;
  --lime-300: #FF9F94;
  --lime-100: #FFE1DD;

  /* Warm neutrals */
  --sand-50:  #F7F6F3;
  --sand-100: #EFEDE7;
  --sand-200: #E3E0D8;
  --white:    #FFFFFF;

  /* Ink */
  --ink-900:  #111111;
  --ink-600:  #6B7280;
  --ink-400:  #9CA3AF;

  /* WhatsApp — se mantienen los colores reales de WhatsApp */
  --wa-bg:        #E5DDD3;
  --wa-bubble-in: #FFFFFF;
  --wa-bubble-out:#DCF8C6;
  --wa-header:    #075E54;
  --wa-tick:      #34B7F1;

  /* Semantic aliases */
  --color-primary:        var(--green-700);
  --color-primary-strong: var(--green-900);
  --color-accent:         var(--lime-500);
  --color-accent-strong:  var(--lime-600);

  --surface-page:    var(--sand-50);
  --surface-card:    var(--white);
  --surface-tint:    var(--green-50);
  --surface-invert:  var(--green-900);

  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-900);
  --text-muted:   var(--ink-600);
  --text-faint:   var(--ink-400);
  --text-on-dark: var(--white);
  --text-on-accent: var(--green-900);

  --border-subtle: var(--sand-200);
  --border-strong: #D6D2C8;

  --focus-ring: color-mix(in srgb, var(--green-700) 45%, transparent);
}


/* Fintick — Typography tokens */
:root {
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale (fluid where useful) */
  --text-display: clamp(2.6rem, calc(1.6rem + 4.4vw), 4.5rem); /* hero */
  --text-h1: clamp(2rem, calc(1.4rem + 2.6vw), 3rem);
  --text-h2: clamp(1.6rem, calc(1.2rem + 1.6vw), 2.25rem);
  --text-h3: 1.5rem;
  --text-lead: 1.25rem;   /* subtitles */
  --text-body-lg: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;
  --text-overline: 0.75rem;

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

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-display: -0.03em;
  --tracking-overline: 0.14em;
}


/* Fintick — Spacing, radius, shadow tokens */
:root {
  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container-max: 1140px;
  --container-narrow: 720px;
  --section-pad-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadows — soft, warm, low-contrast */
  --shadow-xs: 0 1px 2px rgba(17,17,17,0.05);
  --shadow-sm: 0 2px 8px rgba(17,17,17,0.06);
  --shadow-md: 0 10px 30px rgba(13,17,23,0.10);
  --shadow-lg: 0 24px 60px rgba(13,17,23,0.16);
  --shadow-accent: 0 10px 28px rgba(255,87,69,0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur-base: 240ms;   /* @kind other */
  --dur-slow: 420ms;   /* @kind other */
}