/* ===========================================
   TINNTO — Design Tokens
   Manual de Marca v1.0 / Marzo 2026
   =========================================== */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- Colores Primarios ---- */
  --tinnto-negro:          #0A0A0A;
  --tinnto-naranja:        #C4703F;
  --tinnto-blanco:         #FAFAFA;

  /* ---- Colores Secundarios ---- */
  --tinnto-negro-suave:    #1A1A1A;
  --tinnto-gris-oscuro:    #2D2D2D;
  --tinnto-gris-medio:     #6B6B6B;
  --tinnto-gris-claro:     #A3A3A3;
  --tinnto-hueso:          #F5F0EB;

  /* ---- Espectro Naranja ---- */
  --tinnto-naranja-oscuro: #A85A2F;
  --tinnto-naranja-claro:  #D4885A;
  --tinnto-terracota:      #B5654A;
  --tinnto-arcilla:        #8B5E3C;
  --tinnto-naranja-tenue:  #E8C4A8;
  --tinnto-naranja-fondo:  #F7EDE4;
  --tinnto-arena:          #D9C5B2;

  /* ---- Tipografía ---- */
  --font-display:    'Space Grotesk', sans-serif;
  --font-body:       'Inter', sans-serif;
  --font-editorial:  'Space Mono', monospace;

  /* ---- Escala Tipográfica ---- */
  --text-h1:    3.5rem;   /* 56px  - Space Grotesk 700  */
  --text-h2:    2.5rem;   /* 40px  - Space Grotesk 700  */
  --text-h3:    1.5rem;   /* 24px  - Space Grotesk 600  */
  --text-body:  1rem;     /* 16px  - Inter 400          */
  --text-small: 0.875rem; /* 14px  - Inter 400          */
  --text-xs:    0.75rem;  /* 12px  - Space Mono     */

  /* ---- Espaciado ---- */
  --space-xs:   0.25rem;  /* 4px  */
  --space-sm:   0.5rem;   /* 8px  */
  --space-md:   1rem;     /* 16px */
  --space-lg:   1.5rem;   /* 24px */
  --space-xl:   2rem;     /* 32px */
  --space-2xl:  3rem;     /* 48px */
  --space-3xl:  4rem;     /* 64px */
  --space-4xl:  6rem;     /* 96px */

  /* ---- Bordes ---- */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-full: 100px;

  /* ---- Sombras ---- */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.2);

  /* ---- Transiciones ---- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;
}