/* Design tokens — calibrated from crea-graphique/ETICA APLICADA.pdf */

:root {
  /* ── Colors ──────────────────────────────────────────────── */
  /* Backgrounds */
  --c-bg:           #FFFFFF;  /* page bg, hero, enfoque, sobre-mi, contacto */
  --c-bg-sage:      #4E8261;  /* Capacitaciones + Beneficios bands */
  --c-bg-citation:  #F4EDE0;  /* "Solo una prevención..." block */
  --c-bg-footer:    #000000;
  --c-bg-soft:      #FAF7EE;  /* hero tag + beige tag bg */
  --c-bg-card:      #FFFFFF;
  --c-bg-card-hl:   #F5EFDD;  /* highlight inside cards ("De cumplir...") */
  --c-bg-card-hl-2: #F8F4E8;  /* card "Solicitar información" alternate */

  /* Brand */
  --c-sage:         #488b6a;  /* Verde base */
  --c-sage-dark:    #336b50;
  --c-sage-light:   #9cb2a1;  /* Verde Musgo */
  --c-sage-pale:    #c3c0b3;  /* Gris verdoso */

  /* Accents */
  --c-gold:         #d2a95d;  /* Mostaza */
  --c-gold-soft:    #ecd9aa;
  --c-rose:         #e3bbc3;  /* Palo rosa */
  --c-rose-dark:    #c99aaa;

  /* Text */
  --c-text:           #1F1F1F;
  --c-text-muted:     #6B6B6B;
  --c-text-soft:      #4F574E;  /* hero subtitle "De la exigencia legal..." in muted sage */
  --c-text-on-dark:   #F4EDE0;
  --c-text-on-sage:   #FFFFFF;
  --c-text-footer:    #B0B0B0;

  /* Lines */
  --c-line:        #e0dbcc;
  --c-line-dark:   #c3c0b3;  /* Gris verdoso */
  --c-line-rose:   #e3bbc3;
  --c-grey-light:  #e7e8e9;  /* Gris Claro */

  /* States */
  --c-error:    #B14545;
  --c-success:  #4F7458;

  /* ── Typography ──────────────────────────────────────────── */
  /* Inter variable (opsz + wght). Arial fallback to minimize shift
   * before the variable TTF finishes loading.
   */
  --ff-sans:  "Inter", Arial, sans-serif;
  --ff-serif: "Inter", Arial, sans-serif;

  --fs-hero:    clamp(2rem, 4.5vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 3.2vw, 2.5rem);
  --fs-h3:      1.375rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-tag:     0.75rem;
  --fs-number:  clamp(2.5rem, 5vw, 4.5rem);

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;

  /* Inter is a variable font: any integer weight 100–900 is valid. */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Spacing scale ───────────────────────────────────────── */
  --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;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-w:        1200px;
  --max-w-text:   720px;
  --gutter:       clamp(1rem, 4vw, 2.5rem);
  --radius-sm:    4px;
  --radius:       10px;
  --radius-lg:    18px;
  --radius-pill:  999px;

  /* ── Effects ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow:    0 4px 16px rgba(0, 0, 0, 0.06);

  --transition: 180ms ease;
}