/*
 * Design tokens — single source of truth for color, type, spacing and shape.
 * Values extracted from the Figma file "Clinical Talent institute VF".
 * Change a value here and it propagates across the whole site.
 */

:root {
  /* ---- Color: brand & neutrals ---- */
  --color-bg: #fdfdfd;
  --color-surface: #ffffff;
  --color-surface-alt: #eef2f5;      /* soft panel background */
  --color-ink: #2b2d2e;              /* strongest text (headings) */
  --color-text: #565656;            /* body copy */
  --color-text-soft: #6c7273;       /* secondary copy */
  --color-muted: #939b9c;           /* accent / muted teal-grey (buttons, labels) */
  --color-line: #dfe4e6;            /* hairline borders */
  --color-invert: #ffffff;          /* text on dark / imagery */

  /* Dark section (testimonials) — near-black fading to slate */
  --color-dark: #050607;
  --color-dark-soft: #252a2d;
  --color-on-dark: #f4f6f6;
  --color-on-dark-muted: #c5c5c5;

  /* Footer: muted card + black legal bar */
  --color-footer: #939b9c;
  --color-footer-bar: #000000;

  /* Solid dark used by pill CTAs ("Hacer Test", "Más info", "Enviar") */
  --color-btn-dark: #111314;

  /* ---- Gradients ---- */
  /* Large decorative words (TALENTO / DESCUBRE) */
  --gradient-display: linear-gradient(90deg, #c9d7da 0%, #8a9091 100%);
  /* Offer / feature cards */
  --gradient-card: linear-gradient(153deg, #d4dde3 21%, #cee4e2 98%);
  /* Section wash */
  --gradient-wash: linear-gradient(180deg, #ffffff 0%, #d4dde3 100%);
  /* Dark testimonials backdrop */
  --gradient-dark: linear-gradient(180deg, #000000 0%, #0a0e0f 55%, #252a2d 100%);
  /* Per-card DESCUBRE tints */
  --gradient-card-blue: linear-gradient(153deg, #d4dde3 21%, #d0e9fa 98%);
  --gradient-card-green: linear-gradient(153deg, #d4dde3 21%, #cee4e2 98%);

  /* ---- Typography ---- */
  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Fluid type scale (min, preferred, max). Desktop maxima mirror the Figma sizes. */
  --fs-display: clamp(4rem, 16vw, 13.75rem);   /* 220px giant words */
  --fs-h1: clamp(2.5rem, 5.2vw, 4rem);         /* 64px hero */
  --fs-h2: clamp(2rem, 4.4vw, 4rem);           /* section titles up to 64px */
  --fs-h3: clamp(1.75rem, 3.4vw, 3rem);        /* 48px card titles */
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem); /* 20px lead paragraphs */
  --fs-body: 1rem;                             /* 16px base */
  --fs-sm: 0.8125rem;                          /* 13px small print / meta */
  --fs-label: 0.875rem;                        /* 14px labels */

  --lh-tight: 0.9;      /* display headlines */
  --lh-snug: 1.15;      /* titles */
  --lh-normal: 1.5;     /* body */

  --tracking-wide: 0.04em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Vertical rhythm between major sections (fluid) */
  --section-gap: clamp(3.5rem, 8vw, 8rem);

  /* ---- Shape ---- */
  --radius-sm: 5px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container-max: 1440px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --content-max: 1400px;

  /* ---- Effects ---- */
  --shadow-card: 0 18px 40px -24px rgba(38, 48, 47, 0.35);
  --shadow-soft: 0 8px 24px -18px rgba(38, 48, 47, 0.3);
  --ring: 0 0 0 3px rgba(147, 155, 156, 0.5);

  --transition: 200ms ease;
}

/*
 * Breakpoints (for reference — custom properties can't be used inside @media).
 * Media queries in the stylesheets use these literal values:
 *   sm: 40rem  (640px)
 *   md: 48rem  (768px)
 *   lg: 64rem  (1024px)
 *   xl: 80rem  (1280px)
 */