/* ============================================================================
   AIRIN FRANCO LOPEZ — Design System
   colors_and_type.css  ·  Foundational + semantic tokens
   Concept: "Un tulipán en la nieve" — el naranja cálido que rompe el frío.
   Fonts load from Google Fonts CDN (see @import). If you need fully offline
   files, drop TTFs into /fonts and swap the @import for @font-face.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---------------------------------------------------------------------- *
   * 1. BRAND — Naranja Tulipán (el calor, la resiliencia, los CTA)         *
   * ---------------------------------------------------------------------- */
  --tulip-50:  #FDF2EA;   /* tintes muy suaves, fondos de realce            */
  --tulip-100: #FADFC9;   /* hover sobre superficies claras, chips          */
  --tulip-200: #F6C29C;
  --tulip-300: #F09F66;
  --tulip-400: #ED8240;
  --tulip-500: #E8651A;   /* ★ COLOR DE MARCA · CTA · acentos               */
  --tulip-600: #CE560F;   /* hover de botón primario                        */
  --tulip-700: #A8430B;   /* press / texto naranja sobre claro             */
  --tulip-800: #7E3309;
  --tulip-900: #4F2006;   /* el naranja más profundo, uso raro             */

  /* ---------------------------------------------------------------------- *
   * 2. FROST — Blanco frío / la nieve (superficies frías, texto sobre      *
   *    oscuro). El #E8EFF7 del brief vive aquí: es elegancia fría, no       *
   *    cuerpo de texto sobre claro (ahí gana el tinte oscuro de invierno).  *
   * ---------------------------------------------------------------------- */
  --frost-50:  #F6FAFD;
  --frost-100: #E8EFF7;   /* ★ BLANCO FRÍO · secciones frías, texto/oscuro  */
  --frost-200: #D6E2EE;
  --frost-300: #BECEDF;
  --frost-line:#DCE6F0;   /* hairlines frías sobre claro                    */

  /* ---------------------------------------------------------------------- *
   * 3. CREAM — Crema (el calor del papel, secciones secundarias)           *
   * ---------------------------------------------------------------------- */
  --cream-50:  #FBF8F4;
  --cream-100: #F5F0EB;   /* ★ CREMA · fondos de sección secundaria         */
  --cream-200: #EBE2D6;
  --cream-line:#E2D6C6;   /* hairlines cálidas sobre crema                  */

  /* ---------------------------------------------------------------------- *
   * 4. INK — Tinta de invierno (azul-carbón frío para texto y fondos       *
   *    oscuros). Da el contraste accesible que el blanco frío no puede.    *
   * ---------------------------------------------------------------------- */
  --ink-900: #14202B;   /* ★ texto principal · fondo oscuro de marca       */
  --ink-800: #1E2D3A;
  --ink-700: #324350;   /* texto secundario fuerte                         */
  --ink-500: #576675;   /* texto secundario / subtítulos                   */
  --ink-400: #7D8A97;   /* texto silenciado / captions                     */
  --ink-300: #A9B4BF;   /* deshabilitado, placeholders                     */
  --ink-line:#C9D4DE;   /* bordes neutros fríos                            */

  /* base surfaces */
  --white:   #FFFFFF;
  --bg:      #FFFFFF;       /* fondo base                                  */
  --bg-frost: var(--frost-100);
  --bg-cream: var(--cream-100);
  --bg-ink:   var(--ink-900);

  /* ---------------------------------------------------------------------- *
   * 5. SEMANTIC color roles                                                 *
   * ---------------------------------------------------------------------- */
  --brand:        var(--tulip-500);
  --brand-hover:  var(--tulip-600);
  --brand-press:  var(--tulip-700);
  --brand-soft:   var(--tulip-50);

  --fg:           var(--ink-900);   /* texto principal sobre claro         */
  --fg-muted:     var(--ink-500);   /* secundario                          */
  --fg-subtle:    var(--ink-400);   /* captions / meta                     */
  --fg-on-dark:   var(--frost-100); /* texto sobre fondos oscuros          */
  --fg-on-brand:  #FFFFFF;          /* texto sobre naranja                 */

  --line:         var(--ink-line);
  --line-frost:   var(--frost-line);
  --line-cream:   var(--cream-line);

  --success: #2E7D5B;
  --success-soft: #E4F1EB;
  --warning: #C8841A;
  --warning-soft: #FBF0DC;
  --danger:  #C0392B;
  --danger-soft: #F8E6E3;
  --info:    var(--tulip-500);

  /* ---------------------------------------------------------------------- *
   * 6. TYPOGRAPHY                                                           *
   * ---------------------------------------------------------------------- */
  --font-display: 'Bodoni Moda', 'Times New Roman', serif;  /* títulos     */
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* fluid display scale (1.5rem base body) */
  --fs-display: clamp(3rem, 1.4rem + 5.2vw, 5.5rem);   /* 48 → 88          */
  --fs-h1:      clamp(2.5rem, 1.6rem + 3vw, 4rem);     /* 40 → 64          */
  --fs-h2:      clamp(2rem, 1.4rem + 2vw, 2.75rem);    /* 32 → 44          */
  --fs-h3:      clamp(1.5rem, 1.2rem + 1vw, 1.875rem); /* 24 → 30          */
  --fs-h4:      1.375rem;   /* 22 */
  --fs-body-lg: 1.25rem;    /* 20 */
  --fs-body:    1.125rem;   /* 18 — base de lectura                        */
  --fs-body-sm: 1rem;       /* 16 */
  --fs-caption: 0.8125rem;  /* 13 — uppercase tracking                     */

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.6;

  --tracking-display: -0.02em;
  --tracking-h:       -0.01em;
  --tracking-caption:  0.16em;

  /* ---------------------------------------------------------------------- *
   * 7. SPACING — base 8 (4 para micro-ajustes)                              *
   * ---------------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;

  /* ---------------------------------------------------------------------- *
   * 8. RADIUS — editorial: contenido, no burbujeante                       *
   * ---------------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------- *
   * 9. SHADOW — fría, suave, baja. Elevación por borde + crema, no por      *
   *    sombras pesadas.                                                     *
   * ---------------------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(20,32,43,.06), 0 1px 1px rgba(20,32,43,.04);
  --sh-md: 0 8px 24px -10px rgba(20,32,43,.16);
  --sh-lg: 0 24px 60px -28px rgba(20,32,43,.22);
  --sh-brand: 0 12px 30px -12px rgba(232,101,26,.45);  /* realce naranja   */

  --ease: cubic-bezier(.22,.61,.36,1);   /* salida suave, sin rebote       */
  --dur: 220ms;
}

/* ============================================================================
   SEMANTIC TYPE CLASSES  (opt-in helpers)
   ============================================================================ */
.ds-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}
.ds-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-h); color: var(--fg); }
.ds-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-h); color: var(--fg); }
.ds-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); color: var(--fg); }
.ds-h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.005em; color: var(--fg); }
.ds-lead { font-family: var(--font-body); font-size: var(--fs-body-lg); font-weight: 400; line-height: var(--lh-body); color: var(--fg-muted); }
.ds-body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); color: var(--fg); }
.ds-body-sm { font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 400; line-height: var(--lh-body); color: var(--fg-muted); }
.ds-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ds-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--fg);
}