/* ==========================================================================
   VARIABLES INDEX
   ==========================================================================

   ARQUITECTURA EN DOS CAPAS:
   ─ Layer 1 · Tokens fundacionales   → escala bruta, sin semántica de rol
   ─ Layer 2 · Tokens semánticos      → roles tipográficos usados en componentes

   ──────────────────────────────────────────────────────────────────────────
   LAYER 1 — TOKENS FUNDACIONALES
   ──────────────────────────────────────────────────────────────────────────
   1.  Font Family
   2.  Font Weights
   3.  Colors
       - Brand (primary / secondary)
       - Text · Grey · Extra
   4.  Escala tipográfica — rem, Mobile First
       - --fs-xxs  → 0.75rem  (12px)
       - --fs-xs   → 0.875rem (14px)
       - --fs-s    → 0.9375rem(15px)
       - --fs-m    → 1rem     (16px)   ← base cuerpo
       - --fs-ml   → 1.125rem (18px)
       - --fs-l    → 1.25rem  (20px)
       - --fs-xl   → 1.75rem  (28px)
       - --fs-display-xs → 2rem    (32px)
       - --fs-display-s  → 2.25rem (36px)
       - --fs-display-m  → 2.5rem  (40px)
       - --fs-display-l  → 3rem    (48px)
       - --fs-display-xl → 3.5rem  (56px)
   5.  Line Heights — unitless (independientes del breakpoint)
       - --lh-xs        → 1.5
       - --lh-s         → 1.5
       - --lh-m         → 1.5
       - --lh-l         → 1.4
       - --lh-xl        → 1.3
       - --lh-display-* → 1.25 · 1.22 · 1.2 · 1.17 · 1.14
   6.  Border Radius
   7.  Transition
   8.  Spacing — Section Padding (Mobile First)
   9.  Spacing — Section Margin  (Mobile First)

   ──────────────────────────────────────────────────────────────────────────
   LAYER 2 — TOKENS SEMÁNTICOS
   ──────────────────────────────────────────────────────────────────────────
   10. Body / Small / Label
   11. Headings (s · m · l · xl)
       - l y xl usan clamp() para fluidez sin media queries
   12. Display

   ──────────────────────────────────────────────────────────────────────────
   BREAKPOINTS
   ──────────────────────────────────────────────────────────────────────────
   13. Tablet  (≥768px)  — Spacing
   14. Desktop (≥1024px) — Font Scale (rem) + Spacing

   REGLAS DE USO
   ─ Usa SIEMPRE tokens semánticos en componentes (--text-*)
   ─ Los tokens fundacionales (--fs-*, --lh-*) son la escala base; no los
     uses directamente en componentes salvo que no exista token semántico.
   ─ font-size en rem; line-height unitless; iconos en em.
   ─ html { font-size: 100% } — no hacks 62.5%.

   ========================================================================== */


/* ==========================================================================
   LAYER 1 — TOKENS FUNDACIONALES
   ========================================================================== */

:root {

  /* 1. Font Family
     ---------------------------------------------------------------------- */
  --font-primary:        'Open Sans', system-ui, sans-serif;
  --bs-body-font-family: var(--font-primary);

  /* 2. Font Weights
     ---------------------------------------------------------------------- */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* 3. Colors: Brand
     ---------------------------------------------------------------------- */
  --primary-500: #752641;
  --primary-300: #B38293;
  --primary-700: #43061B;
  --primary-100: #F9F7F8;

  --secondary-700: #E78309;
  --secondary-500: #F59929;
  --secondary-300: #FFB357;
  --secondary-100: #FFD7A5;

  /* Colors: Text */
  --text-base: #66707A;

  /* Colors: Grey */
  --black:    #000000;
  --grey-900: #444C55;
  --grey-800: #66707A;
  --grey-700: #7F8994;
  --grey-600: #99A3AE;
  --grey-500: #B2BEC7;
  --grey-400: #CCD5DD;
  --grey-300: #E2E8EE;
  --grey-200: #F5F8FA;
  --grey-100: #F5F8FA;
  --white:    #FFFFFF;

  /* Colors: Extra */
  --danger-500:  #F53232;
  --danger-100:  #FFE7E7;
  --success-500: #0CDA1D;
  --success-100: #CAF6CD;
  --warning-500: #FFB52C;

  /* 4. Escala tipográfica — Mobile First (rem)
     Conversión: valor / 16 = rem
     ---------------------------------------------------------------------- */
  --fs-xxs:        0.75rem;    /* 12px */
  --fs-xs:         0.875rem;   /* 14px */
  --fs-s:          0.9375rem;  /* 15px */
  --fs-m:          1rem;       /* 16px  ← base cuerpo */
  --fs-ml:         1.125rem;   /* 18px */
  --fs-l:          1.25rem;    /* 20px */
  --fs-xl:         1.75rem;    /* 28px */
  --fs-display-xs: 2rem;       /* 32px */
  --fs-display-s:  2.25rem;    /* 36px */
  --fs-display-m:  2.5rem;     /* 40px */
  --fs-display-l:  3rem;       /* 48px */
  --fs-display-xl: 3.5rem;     /* 56px */

  /* 5. Line Heights — unitless (no dependen del breakpoint)
     ---------------------------------------------------------------------- */
  --lh-xs:         1.5;
  --lh-s:          1.5;
  --lh-m:          1.5;
  --lh-l:          1.4;
  --lh-xl:         1.3;
  --lh-display-xs: 1.25;
  --lh-display-s:  1.22;
  --lh-display-m:  1.2;
  --lh-display-l:  1.17;
  --lh-display-xl: 1.14;

  /* 6. Border Radius
     ---------------------------------------------------------------------- */
  --radius-0:        0px;
  --radius-2:        2px;
  --radius-4:        4px;
  --radius-6:        6px;
  --radius-8:        8px;
  --radius-12:       12px;
  --radius-16:       16px;
  --radius-24:       24px;
  --radius-32:       32px;
  --radius-complete: 9999px;

  /* 7. Transition
     ---------------------------------------------------------------------- */
  --transition-default: all 0.3s ease-in-out;

  /* 8. Spacing — Section Padding (Mobile First)
     ---------------------------------------------------------------------- */
  --section-padding:      24px;
  --section-padding-xs:   8px;
  --section-padding-sm:   12px;
  --section-padding-lg:   32px;
  --section-padding-none: 0px;

  /* 9. Spacing — Section Margin (Mobile First)
     ---------------------------------------------------------------------- */
  --section-margin:      24px;
  --section-margin-sm:   12px;
  --section-margin-lg:   32px;
  --section-margin-none: 0px;

}


/* ==========================================================================
   LAYER 2 — TOKENS SEMÁNTICOS
   Regla: los componentes SOLO usan estos tokens, nunca --fs-* directamente.
   ========================================================================== */

:root {

  /* 10. Body / Small / Label
     ---------------------------------------------------------------------- */
  --text-body-size:   var(--fs-m);               /* texto de párrafo */
  --text-body-line:   var(--lh-m);
  --text-body-weight: var(--font-weight-regular);

  --text-small-size:  var(--fs-xs);              /* anotaciones, meta-info */
  --text-small-line:  var(--lh-s);

  --text-label-size:  var(--fs-xxs);             /* badges, etiquetas micro */
  --text-label-line:  var(--lh-xs);

  /* 11. Headings
     l y xl usan clamp() → fluidos entre mobile y desktop sin media queries
     ---------------------------------------------------------------------- */

  /* h4 / subtítulos de componente */
  --text-heading-s-size:  var(--fs-ml);

  /* h3 / títulos de card */
  --text-heading-m-size:  var(--fs-l);

  /* h2 / section title — fluido 28→32px */
  --text-heading-l-size:  clamp(1.75rem, 1.4rem + 1.5vw, 2rem);

  /* h1 / título de página — fluido 32→40px */
  --text-heading-xl-size: clamp(2rem, 1.5rem + 2vw, 2.5rem);

  --text-heading-line:   var(--lh-l);
  --text-heading-weight: var(--font-weight-regular);

  /* 12. Display / Hero
     ---------------------------------------------------------------------- */
  --text-display-size: clamp(2.5rem, 2rem + 2.5vw, 3rem);  /* fluido 40→48px */
  --text-display-line: var(--lh-xl);

}


/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* 13. Tablet (≥768px) — Spacing */
@media (min-width: 768px) {
  :root {
    --section-padding:    32px;
    --section-padding-xs: 12px;
    --section-padding-sm: 16px;
    --section-padding-lg: 40px;

    --section-margin:    32px;
    --section-margin-sm: 16px;
    --section-margin-lg: 40px;
  }
}

/* 14. Desktop (≥1024px) — Font Scale (rem) + Spacing
   Los --lh-* son unitless → no necesitan override de breakpoint.
   ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    /* Font Scale — Desktop */
    --fs-xxs:        0.75rem;   /* 12px */
    --fs-xs:         0.875rem;  /* 14px */
    --fs-s:          1rem;      /* 16px */
    --fs-m:          1.125rem;  /* 18px */
    --fs-ml:         1.25rem;   /* 20px */
    --fs-l:          1.5rem;    /* 24px */
    --fs-xl:         2rem;      /* 32px */
    --fs-display-xs: 2.5rem;    /* 40px */
    --fs-display-s:  3rem;      /* 48px */
    --fs-display-m:  3.5rem;    /* 56px */
    --fs-display-l:  4rem;      /* 64px */
    --fs-display-xl: 4.5rem;    /* 72px */

    /* Spacing */
    --section-padding:    64px;
    --section-padding-xs: 24px;
    --section-padding-sm: 32px;
    --section-padding-lg: 80px;

    --section-margin:    64px;
    --section-margin-sm: 32px;
    --section-margin-lg: 80px;
  }
}